scale3d()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
scale3d()
は CSS の関数で、 3D 空間において要素を変倍する座標変換を定義します。
変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は <transform-function>
データ型になります。
試してみましょう
構文
scale3d()
関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。
css
scale3d(sx, sy, sz)
値
例
原点の変更なし
HTML
html
<div>Normal</div>
<div class="scaled">Scaled</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
background-color: pink;
}
結果
座標変換の原点を移動
HTML
html
<div>Normal</div>
<div class="scaled">Scaled</div>
CSS
css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px);
transform-origin: left;
background-color: pink;
}
結果
仕様書
Specification |
---|
CSS Transforms Module Level 2 # funcdef-scale3d |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
transform
<transform-function>
scaleZ()
translate3d()
rotate3d()
- 独立した座標変換プロパティ: