はじめに
フロントエンドエンジニアとしてコーディング業務をはじめて約半年が経ち、
transform / translate / transitionなどの理解がやっとできるようになってきました。
その中でまだ馴染みが薄いtranslate3d()という機能について調べてみました。
translateについて
transformの中の一機能である。
trans（「〜を超えて」、「向こう側に」） + late（ラテン語の「運ぶ（latus）」が語源）
＝ 向こう側に運ぶ
つまり、ある基点をもとに移動をさせる（位置をずらす）ために使う。
translate3d()
transform: translate3d(x, y, z);と書く。
X軸：横座標の移動
Y軸：縦座標の移動
Z軸：奥行き方向の移動（近づいたり遠ざかったりする）
※Z軸の指定について
Z軸（奥行き）には%が使えないため、
pxで絶対値を指定するか、emやvw等で間接的に値を指定する必要がある。
※ translate3d() による奥行き（Z軸）の視覚効果は、
perspective を指定した場合に有効となる。
perspectiveについての詳細はページ下部にて記載。
実際に記述してみる
transform: translate3d(70px, 70px, 60px);
z軸を正の値にすると、前に来たように感じる動きになります。
See the Pen Untitled by unt-k (@ofeeluvx-the-looper) on CodePen.
transform: translate3d(30px, 0, -50px);
z軸を負の値にすると、後ろに引っ込んでいくように感じる動きになります。
See the Pen Untitled by unt-k (@ofeeluvx-the-looper) on CodePen.
親要素に指定する必要があるもの
親要素にプロパティをいくつか指定することで3D表現ができるようになる。
①perspective: 数値px;
②perspective-origin: 数値px 数値px;
①perspective: 数値px;
視点から要素までの距離を指定する。
数値pxは視点と物体までの距離。
小さいpx → 視点が近い 歪みやすくなる
大きいpx → 視点が遠い 遠いほどフラットに近づく
perspective 単体では何も起きず、translate3d()と合わさって初めて効果が出る。
※無しにすると遠近法が適用されないため視覚的な変化が見えなくなる。
See the Pen Untitled by unt-k (@ofeeluvx-the-looper) on CodePen.
②perspective-origin: 数値px 数値px;
視線の位置を指定する。
値には視点のXとYの位置をいれる。
初期値は50% 50%で要素の中心を真っ直ぐみている状態。
perspectiveがないと無効になる。
※指定しない場合は 50% 50% が使われ、視点が常に要素の中心に固定される。
See the Pen
Untitled by unt-k (@ofeeluvx-the-looper)
on CodePen.
その他transform-style: preserve-3d;などあるが別途。
最後に
まだ実務で使ったことはなく理解度も高くはない状態ですが、
x,y,zの座標を使いこなせるようになれば複雑な動きも実現できそうです。
ほかのtransformの値と掛け合わせていけばかなり応用が効きそうだと思いました。
参考
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/transform-function/translate3d
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/transform-function/translateZ
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/transform-function/perspective
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/transform-style
https://qiita.com/fumu238/items/6ca8a067fea273948212
https://ics.media/entry/210519/