translate3d()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
translate3d() は CSS の関数で、要素を三次元空間内で再配置します。返値は <transform-function> データ型です。
試してみましょう
transform: translate3d(0); transform: translate3d(42px, -62px, -135px); transform: translate3d(-2.7rem, 0, 1rem); transform: translate3d(5ch, 0.4in, 5em); <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); } この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。
構文
css
translate3d(tx, ty, tz) 値
tx-
移動ベクトルの横座標を表す
<length>または<percentage>です。 ty-
移動ベクトルの縦座標を表す
<length>または<percentage>です。 tz-
移動ベクトルの z 成分を表す
<length>です。<percentage>値は指定できません。この場合、これを含む座標変換は無効とされます。
例
単一軸の座標変換の使用
HTML
html
<div>Static</div> <div class="moved">Moved</div> <div>Static</div> CSS
css
div { width: 60px; height: 60px; background-color: skyblue; } .moved { /* perspective(500px) translateX(10px) と等価 */ transform: perspective(500px) translate3d(10px, 0, 0px); background-color: pink; } 結果
z 軸と x 軸を組み合わせた座標変換
HTML
html
<div>Static</div> <div class="moved">Moved</div> <div>Static</div> CSS
css
div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: perspective(500px) translate3d(10px, 0, 100px); background-color: pink; } 結果
仕様書
| Specification |
|---|
| CSS Transforms Module Level 2 # funcdef-translate3d |