perspectiveで奥行きのあるアニメーション。

perspectiveプロパティ。

ある要素にperspectiveプロパティを指定すると、3D配置された子要素に奥行きを与えます。

3D配置の例としては、z方向の移動やx軸回転などがあります。

その値は、z = 0、すなはちxy平面からz方向にどれだけ離れた位置に視点を置いているかを指定します。

実際に試してみましょう。
2つの正方形（#magenta、#cyan）を横並びにし、z方向の位置をずらしてみました。

そのままブラウザで表示してみます。

「奥行き」の指定がないため、z方向に前後させているにも関わらず見た目に反映されていません。２つの正方形が同じ大きさに表示されてしまっています。


〜そこで、親要素（「.parents」とします）にperspectiveを適用。

２つの正方形の大きさが変化しました。
z方向的に前方に配置されている「#magenta」が大きく、後方にある「#cyan」が小さく表示され、位置も少し移動しました。

ガイドを引いてみると、消失点（視線の行先）が中央にある事がわかります。
１点透視の形で表現されるのですね。
要素の位置が変わったように見えたのもそのためです。

値 ⤵︎ 　変化 ⤴︎。

perspectiveプロパティは、その値が小さくなるほど見た目の変化量は大きくなる性質を持っています。
〜どういうことなのでさうか。

長方形をz方向に前進させるケースで考えてみましょう。

perspective：大。
xy平面と視点の距離が大きい状態。
遠くから眺めていることになるので、対象物が移動しても見た目の変化はさほど感じられません。

perspective：小。
xy平面と視点の距離が小さい。
対象物を間近で観ている状態なので、少し移動したでけでも見た目の変化はとてつもないものと成増。

perspectiveプロパティはこの環境をシミュレートします。

値が大きい = 遠くから観ている ▶︎ 変化：小
値が小さい = 近くで見ている ▶︎ 変化：大

〜指定値の大きさと見た目の変化量は逆の関係になるのですね。

ちなみに視点と対象物の距離が近すぎると、もはや外観視できない状態となり、画面に表示されません。
また視点より対象物が後ろになった場合も表示されなく成増。

アニメーションに使おう。

ではperspectiveプロパティを、実際にアニメーションに適用させてみましょう。

画像を3D回転させます。
画像の中心を原点に配置、回転軸はY軸を少しZ方向前方におきました。

3D回転についてはこちら⬇︎の記事で詳しく紹介していますので、よろしかったら参考にしてください。

CSSで3D回転アニメーション。

2020.10.21
〽️ rotate3dに挑戦。

〜コードを書いていきます。

transform-originのZの位置指定はレスポンシブを考慮して相対値（vw）にしました。
またkeyframesは初期状態（0%）の内容は省略して記述しています。

現段階では「奥行き」を指定していないので、冒頭で示したような味気ない回転をしています。
このあとperspectiveを仕込んでいくのですがその前に、このプロパティは親要素に指定するのでした。親要素を作ってあげましょう。

<img>要素を<div>〜</div>で囲んで親要素を用意しました。
この親要素「parents」に対してperspectiveを指定します。

これで完成です！
このページには実際にCSSを記述して表示させているのですが、隣接する要素にも絡んでのアニメーション。まさに「飛び道具」ですね💧

ぼやけるのもまた良し。

最後までお読みいただき、ありがとうございました。

ところで気付いたでしょうか？アニメーションの画像にはSVGを使っているのですが、それにも関わらず前面に来たときには画像がぼやけています。

perspective。一見、アニメーションに合わせて画像を拡大/縮小させているように見えるのですが、画像自体をその都度レンダリングしているわけではありません。
画像の外側にある<img>要素自体をパースしているため、SVG画像であろうとぼやけてしまうのですね。

でも、かえってぼやけてしまったほうが人間の感覚に近いような気もします。
これはこれで良し、と思いました。
今回はperspectiveに小さい値を指定したのでインパクト大のアニメーションとなりましたが、逆に大きな値を使ってマイルドな奥行きを与えるのもいいかもしれませんね。
皆さんもいろいろ実験してみてください。ではまた〜 ♫