scaleZ()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
scaleZ() は CSS の関数で、要素を Z 軸に沿って変倍する座標変換を定義します。結果は <transform-function> データ型になります。
試してみましょう
transform: scaleZ(1); transform: scaleZ(1.4); transform: scaleZ(0.5); transform: scaleZ(-1.4); <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); } これは要素のそれぞれの点の Z 座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 scaleZ(-1) は軸の線対称を定義し、Z 軸は (transform-origin プロパティの指定通りに) 原点を通過します。
上記のデモでは、perspective: 550px; (三次元空間を作るため) と transform-style: preserve-3d; (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。
メモ: scaleZ(sz) は scale3d(1, 1, sz) と等価です。
構文
css
scaleZ(s) 値
例
HTML
html
<div>Normal</div> <div class="perspective">Translated</div> <div class="scaled-translated">Scaled</div> CSS
css
div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* 3D 空間を生成するために視点を含める */ transform: perspective(400px) translateZ(-100px); background-color: limegreen; } .scaled-translated { /* 3D 空間を生成するために視点を含める */ transform: perspective(400px) scaleZ(2) translateZ(-100px); background-color: pink; } 結果
仕様書
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-scalez |
ブラウザーの互換性
関連情報
scaleX()scaleY()transform<transform-function>transform-origin- 独立した座標変換プロパティ: