CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのperspective-originプロパティをアニメーションさせる方法

perspective-originプロパティとは

perspective-originプロパティは、CSSの3D変換において、閲覧者が要素を見る位置（消失点）を指定するためのプロパティです。この値をアニメーションさせることで、奥行きのある立体的な動きを表現できます。

実装例

CSSでperspective-originプロパティにアニメーションを実装するには、以下のコードを実行してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo1 {
            position: relative;
            margin: auto;
            height: 250px;  
            width: 350px;
            padding: 10px;
            border: 2px solid orange;
            perspective: 125px;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            70% {
               perspective-origin: 5px 30%;
            }
         }
         #demo2 {
            padding: 70px;
            position: absolute;
            border: 2px solid black;
            background-color: blue;
            color: white;
            transform: rotateX(30deg);
         }
      </style>
   </head>
   <body>
      <h1>CSS perspective-origin property</h1>
      <div id = "demo1">This is demo text in div1.
         <div id = "demo2">This is demo text in div2.</div>
      </div>
   </body>
</html>

コードのポイント

  • @keyframes myanim：アニメーションの挙動を定義します。進行度が70%の時点で、perspective-originを「5px 30%」へ移動させます。
  • animation: myanim 3s infinite：定義したアニメーションを3秒かけて無限に繰り返すよう指定しています。
  • perspective: 125px：親要素に遠近感（奥行き）を設定することで、子要素の3D効果を有効にしています。
  • transform: rotateX(30deg)：子要素をX軸方向に30度回転させ、立体感を演出しています。

このコードを実行すると、青色の子要素が回転しながら、視点の位置が変化することで奥行きのあるアニメーションが繰り返し表示されます。perspective-originの値を変更すれば、消失点の位置を自由に調整でき、より多彩な3D表現が可能になります。

  1. CSSのperspectiveプロパティをアニメーションさせる方法を解説

    CSSのperspective（パースペクティブ）プロパティは、3D変換における奥行きの深さを定義するプロパティです。このプロパティにアニメーションを適用すると、視点の距離が変化することで、要素に動的な立体効果を与えることができます。perspectiveプロパティの基本perspectiveプロパティの値が小さいほど視点が要素に近づき、3D効果が強調されます。逆に値が大きいほど、遠くから見たような自然な奥行き表現になります。この値の変化を@keyframesで定義することで、アニメーションとして実装できます。実装例以下は、perspectiveプロパティにCSSアニメーションを適用するサンプ

  2. CSSのpadding-topプロパティでアニメーションを実行する方法

    CSSでは、padding-topプロパティもアニメーションの対象にすることができます。@keyframesルールの中でpadding-topの値を変化させることで、要素の上側の余白が滑らかに動くアニメーションを作成できます。実装のポイントアニメーションさせたい要素にanimationプロパティを設定します。@keyframes内で、進行度（例：30%）の時点でのpadding-topの値を指定します。アニメーション時間や繰り返し回数は自由に調整可能です。サンプルコード以下のコードでは、3秒間のアニメーションを無限に繰り返し、途中（30%の時点）でpadding-topが60pxまで変化します