CSS Infinite 3Dスライダー

このチュートリアルシリーズでは、HTMLとCSSのみを使用して動的な画像スライダーを作成することを調査します。 画像数に関係なく、一貫したマークアップとさまざまなCSSスタイリングで、多様な結果をどのように達成できるかを示します。 以前の分割払いでは、円形の無限に回転するスライダーとひっくり返るポラロイドスタイルのスライダーが特徴でした。この分割払いは、3次元のスライダーに掘り下げられます。 当初は複雑ですが、コードの多くは以前の例に基づいて構築され、変更が施されています。 シリーズの新人は、基礎的なコンテキストについて以前の記事をレビューする必要があります。

CSSスライダーシリーズの概要

円形回転画像スライダー

• ポラロイド画像をめくって
• Infinite 3Dスライダー（現在の記事）
私たちの目標は、視覚的に魅力的な3Dスライダーを作成することです。 一見すると、4つの画像を表示する回転キューブに似ています。ただし、実際には戦略的に配置された6つの画像を利用しています。 別の視点からスライダーを見ると、この配置が明らかになります。

画像の配置を理解する

画像の配置を視覚化したので、コードを調べてみましょう。

基本構造

HTMLは、以前のスライダーと一致しています：

CSSグリッドは、画像を積み重ねるために使用されます

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

アニメーションの実装

スライダーのロジックは、最初の記事の円形スライダーを反映しています。 画像はポリゴンを形成します。完全な回転が初期画像に戻ります。 以前のスライダーは、

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
}

および

を使用しました。 この3Dスライダーは、3Dポジショニングに

を使用してから、コンテナを回転させます。

SASSは画像をループし、変換を適用するために使用されます：transform-origin animation-delay transform

プロパティは3つの値を使用します：

画像の初期回転。 角度は画像数（n）に依存し、360 deg/n。 中心点を調整するための翻訳。 距離は50％/tan（180deg/n）として計算されます 目的の配置のために、x軸（90deg）の周りの回転

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
     transform: 
       rotate(#{360*($i - 1) / $n}deg) /* 1 */
       translateY(50% / math.tan(180deg / $n)) /* 2 */ 
       rotateX(90deg); /* 3 */
  }
}

。

transform 無限ループのためのコンテナ回転

最後に、コンテナを回転させると、無限のスライダー効果が作成されます：
2. キーフレームは円形のスライダーに似ており、コンテナを回転させて各画像を表示します。 -90deg x軸回転は、画像の90 deg回転を補正し、視点は3D効果を追加します。
さらにスライダーのバリエーション：垂直およびキューブスライダー

3. 記事では、バリエーションを調査します。垂直スライダー（キーフレームと画像変換でrotate()をrotateX()に変更することで達成されます）とキューブスライダー（各面に6つの画像と特定の回転を使用）。 キューブスライダーのアニメーションはより複雑で、複数の軸上の回転の慎重なオーケストレーションが必要です。ランダムキューブスライダーのバリエーションも提示されており、より予測不可能な効果のために非シーケンシャル回転を導入します。

   結論
   チュートリアルは、最小限のHTMLとJavaScriptを使用して複雑なアニメーションを作成する際のCSSの力を強調することで終了します。 このシリーズは、インタラクティブで視覚的に魅力的な要素を構築するためのCSSの汎用性を示しています。

以上がCSS Infinite 3Dスライダーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。