CSSを使用して3Dフォトウォール効果を作成する

CSS を使用して 3D フォトウォールを作成します。具体的なコードは次のとおりです。

<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>無題のドキュメント</title>
</head>
<本文>
 <div>
  <画像ソース="#"/>
  <画像ソース="#"/>
  <画像ソース="#"/>
  <画像ソース="#"/>
  <画像ソース="#"/>
  <画像ソース="#"/>
  <画像ソース="#"/>
  <画像ソース="#"/>
 </div>
 
</本文>
</html>

上記のコードは準備です。HTML コードの本文に div を配置し、その中にフォトウォールに表示したい写真を入れます。数は任意です。次に、スタイルを書き始めます。

body{perspective: 5800px;}

上記のコードは、写真の壁に対して、少なくともすべての写真の移動軌跡を収容するのに十分な大きさの 3D 表示距離を設定します。

img{position:absolute;height:480px;width:320px;}

上記のコードは、各写真のスタイルを設定し、写真に絶対位置を与えることで、写真の位置を任意に制御できるようにします。このとき、写真は互いに重なり合います。幅と高さは、フォトウォール内の写真の特定のサイズによって異なります。もちろん、サイズを設定することもできます。320 * 480は私が示した例です。

img:nth-child(1){transform: translateZ(500px);}
 img:nth-child(2){transform: translateZ(-500px);}
 img:nth-child(3){transform:rotateY(45deg) translateZ(-500px);}
 img:nth-child(4){transform:rotateY(45deg) translateZ(500px);}
 img:nth-child(5){transform:rotateY(-45deg) translateZ(500px);}
 img:nth-child(6){transform:rotateY(-45deg) translateZ(-500px);}
 img:nth-child(7){transform:rotateY(90deg) translateZ(500px);}
 img:nth-child(8){transform:rotateY(90deg) translateZ(-500px);}

上記のコードは、各写真のスタイルを個別に設定し、各写真が独自のY軸を中心に一定の角度で回転するようにします。角度は、配置する写真の枚数によって異なります。写真がn枚ある場合、各写真は順番に360/n度回転します。たとえば、ここに8枚の写真を置いたので、各写真は前の写真よりも360/8 = 45度回転し、0度、45度、90度、135度、180度、225度、270度、315度のようにレイヤーごとに回転し、各写真に独自のZ軸（このとき各写真のZ軸方向が変わっています）に対する正（負の値もすべて許容されます）の等距離変位を設定して広げます。ここで書いた効果は同じです。45度回転して-500px変位することは、実際には225度回転して500px変位することと同じです。

上面図: 最初に回転し、次に全方向に広がります。

移動する前に、まず回転させて Z 軸の方向を変更する必要があります。そうしないと、次のことが起こります。

ここに画像の説明を挿入

まずシフトしてから回転します。最初にシフトするときにすべての画像の Z 軸が最初の方向にあるため、すべての画像が同じ方向に一定の距離シフトされ、重なり合ったままになります。また、再度回転するときには、画像が一緒に圧縮されます。

それから

div{マージン:0 自動;マージン上部:600px;
変換スタイル: 3D を保持します。
アニメーション:zhuan 6s 線形無限;高さ:480px;幅:320px;}
@keyframes zhuan{
   0%{transform:rotateX(-15deg)rotateY(0);}
   100%{変換: 回転X(-15度) 回転Y(360度);}
  }

最後のステップ：すべての画像を含むdivを初期位置を中心に回転させるアニメーション効果、つまりrotateY（360度）を設定します。アニメーションは画像ではなくdivに設定する必要があることに注意してください。そうしないと、「回転」になります。必要な効果は「回転」です。観察しやすいようにブラウザの中央に表示するようにマージンを設定し、3Dパースペクティブを設定してから、アニメーションの遷移時間を6秒に設定し（回転速度は変更できます）、無限ループするようにinfiniteを設定します。観察しやすいように、div全体をx軸を中心に-15度回転させます。

レンダリング

ここに画像の説明を挿入

要約する

上記は、CSS を使用して 3D フォトウォール効果を作成する方法について紹介したものです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: 32 典型的な列/グリッドベースのウェブサイト

>>: ウェブデザインにおけるキーワード設計手法の紹介