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

〽️perspectiveプロパティ。 〽️値 ⤵︎  変化 ⤴︎。 〽️アニメーションに使おう。 〽️ぼやけるのもまた良し。





⬆︎SVGついてのまとめページはこちら。

こんにちは、「ふ」です。
こちら⬆︎。
3D空間でY軸を中心に要素を回転させているのですが、なんか・・

全然3Dじゃない。

「奥行き」の指定がなされていないのが原因です。

でもご安心を。CSSには「奥行き」を設定するperspectiveプロパティというものがあります。これを使って奥行きのあるアニメーションを実装しましょう。

perspectiveプロパティはその名の通り、3D空間でパースをとったような表現を可能にする、結構な「飛び道具」です。

是非習得してwebページにインパクトをつけるのに役立ててください笑

perspectiveプロパティ。


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

element { 「「1perspective:〇〇px;」」 }

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

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

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

◼︎ CSS

#cyan { transform:「「1translateZ(-5vw)」」; } #magenta { transform:「「1translateZ(1vw)」」; }

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

◼︎ ブラウザ


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


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

.parents { 「「1perspective:5vw;」」 }


◼︎ ブラウザ


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

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

値 ⤵︎  変化 ⤴︎。


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

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

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

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

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

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

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

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

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


◼︎ fu.svg


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

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

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

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

2020.10.21
〽️ rotate3dに挑戦。


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

◼︎ HTML


<img 「「1id = "fu"」」 src = "fu.svg">

◼︎ CSS


「「1#fu」」 { transform-origin:center center 20vw; animation:「「4rote」」 4s linear infinite; } @keyframes 「「4rote」」 { 100% { transform:rotate3d(0,1,0,1turn); } }

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

◼︎ ブラウザ


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

◼︎ HTML


「「1<div class = "parents">」」 <img id = "fu" src = "fu.svg"> 「「1</div>」」

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

◼︎ CSS


.parents { 「「1perspective:50vw;」」 }

◼︎ ブラウザ


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

ぼやけるのもまた良し。


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

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

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

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



関連記事

SVG、線を描くアニメーション。

2020.09.23
〽️ 破線のプロパティをつかいます。


SVG、use要素を使ったモーションパス。

2020.09.07
〽️ ポイントは‥「マイナスの遅れ」。


SVG、モーションパスで複数の要素を動かす。

2020.08.29
〽️ 小技を集結させて実装します。


SVGアニメーション05、アニメーションしている部分をクリッピング(マスク)する。

2020.07.06
〽️ テキストの内部だけアニメーション。












「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。