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>
データ型になります。
試してみましょう
transform: scale3d(1, 1, 1);
transform: scale3d(1.3, 1.3, 1.3);
transform: scale3d(0.5, 1, 1.7);
transform: scale3d(-1.4, 0.4, 0.7);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 800px;
perspective-origin: 150% 150%;
}
#example-element {
width: 100px;
height: 100px;
perspective: 550px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgba(90, 90, 90, 0.7);
transform: translateZ(50px);
}
.back {
background: rgba(0, 210, 0, 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(210, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 210, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(210, 210, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(210, 0, 210, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
この変倍座標変換は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (等方的) で、要素の形が保たれます (これは相似変換です)。
座標の値が [-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は 点対称化 と大きさの変更を行います。1 と等しい場合、変倍は何もしません。
構文
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 |
ブラウザーの互換性
関連情報
transform
<transform-function>
scaleZ()
translate3d()
rotate3d()
- 独立した座標変換プロパティ: