コース推薦:

CSS scale() 関数

定義と使用方法 scale() CSSの

scale() 関数は、要素(幅と高さ)を拡大するために使用されます。

scale() 関数は、要素が x と y 方向における拡大値を定義します。 transform 属性で使用されています。

インスタンス

例1

を使用して scale() 複数の<div>要素を拡大:

#myDiv1 {
  transform: scale(0.7);
}
#myDiv2 {
  transform: scale(110%);
}
#myDiv3 {
  transform: scale(1.1, 0.5);
}

実際に試してみる

例2

を使用して scale() 画像の拡大:

#img1 {
  transform: scale(0.7);
}
#img2 {
  transform: scale(110%);
}
#img3 {
  transform: scale(1.1, 0.5);
}

実際に試してみる

CSS 语法

scale(sx, sy)
説明
sx 必須。数値またはパーセンテージ。幅の拡大ベクトルを指定します。
sy

オプション。数値またはパーセンテージ。高さの拡大ベクトルを指定します。

省略すると、値は sx と同じに設定されます。

技術的詳細

バージョン: CSS Transforms Module Level 1

ブラウザのサポート

テーブルの数字は、その機能を完全にサポートする最初のブラウザのバージョンを示しています。

クローム エッジ ファイアフォックス サファリ オペラ
1 12 3.5 3.1 10.5

関連ページ

チュートリアル:CSS 2D 変換

参考:CSS transform 属性

参考:CSS scale 属性

参考:CSS scale3d() 函数

参考:CSS scaleX() 函数

参考:CSS scaleY() 函数