CSSとJavaScriptを使用して3D回転カルーセルを構築します

CSS 3D変換とJavaScriptを使用して、Web画像またはコンテンツの動的表示を強化するインタラクティブな3D回転カルーセルを構築します。この記事では、このコンポーネントを作成する方法を段階的にガイドします。

このトピックを最初に研究したとき、3Dカルーセルは必要ありませんでしたが、その特定の実装の詳細にもっと注意を払いました。コアテクノロジーはもちろん、CSS変換モジュールレベル1からですが、その過程で、CSS、SASS、クライアントJavaScriptのすべての側面を含む他の多くのフロントエンド開発技術が適用されます。

このCodepenには、さまざまなバージョンのコンポーネントが表示されます。それらを構築する方法を示します。

CSS 3D変換の設定を説明するために、コンポーネントの純粋なCSSバージョンを示します。次に、JavaScriptを使用してそれを強化して、シンプルなコンポーネントスクリプトを開発する方法を紹介します。

キーポイント

CSS 3D変換とJavaScriptを使用してインタラクティブな3D回転カルーセルを作成して、Webページでより動的に画像またはコンテンツを表示します。
• 画像の数に基づいてポリゴン近似を使用して、円形の3D空間に画像を配置して画像を配置してカルーセルを構築し、JavaScriptの強化を介した可視性とナビゲーションを制御します。
Carouselグラフの適応設計は、CSSのメディアクエリとパーセンテージベースのサイジングを使用して達成され、さまざまな画面サイズとデバイスの向きに適応できるようにします。
HTMLとJavaScriptを介してナビゲーションコントロールを追加してユーザーの相互作用を強化し、ユーザーがカルーセルマップアイテムを手動でループできるようにします。
オートプレイ、遷移効果、無限ループ、テキストまたは異なる形状などの高度なカスタマイズオプションを探索し、特定の設計ニーズを満たすための柔軟なカスタマイズオプションを提供します。
• キャラクターチャートマーク

マークアップの場合、コンポーネント内の画像は要素にラップされています。これは、基本的なフレームワークを提供します。

これが私たちの出発点になります。 <figure></figure> カルーセル図の幾何学的構造

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

CSSを見る前に、次のセクションで開発される計画の概要を説明します。

このポリゴンの数は、カルーセル図の数と同じです

カルーセルに3つの画像がない場合はどうなりますか？ポリゴンは定義できず、次のプロセスをそのまま適用することはできません。いずれにせよ、2つの画像がわずかに可能性が高く、直径のある2つのポイントに配置できます。簡単にするために、これらの特別なケースは処理されず、少なくとも3つの画像があると仮定します。ただし、関連するコードの変更は難しくありません。

この想像上の参照ポリゴンは、ビューポートの平面に垂直な3Dスペースにあり、その中心を画面に向かって後ろに押します。 、下の図に示すように、

このように、現在の視聴者指向のエッジはスクリーンプレーンz = 0になりますが、フロント画像は視点の短縮の影響を受けず、通常の2Dサイズになります。写真の文字dは、CSSパースペクティブ属性の値を表します。

カルーセルグラフの幾何学的構造を構築します このセクションでは、重要なCSSルールを紹介します。これについては、段階的に説明します。

次のコードスニペットでは、いくつかのSASS変数を使用して、コンポーネントの構成を容易にします。カルーセルの画像数を表して

を使用し、

を使用して画像の幅を指定します。 $n $item-width

要素は、最初の画像の包含ボックスであり、他の画像が配置および変換される参照要素でもあります。カルーセルには表示する画像が1つしかないと仮定すると、サイズとアライメントから始めることができます：

<figure></figure>

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

要素には、カルーセルのアイテム幅が処方されており、画像と同じ高さを持っています（サイズは異なりますが、同じアスペクト比が必要です）。このようにして、カルーセル容器の高さは、画像の高さに応じて自動的に調整されます。また、

は、カルーセル容器の水平に中心です。 <figure></figure> <figure></figure>最初の画像は、ターゲット位置、つまりカルーセルの前面に既にあるため、追加の変換を必要としません。

回転変換を

要素に適用することにより、3D空間でカルーセルを回転させることができます。この回転はポリゴンの中心にある必要があるため、

：<figure></figure>のデフォルト変換オリジンを変更します。 <figure></figure>

この値は逆です。CSSでは、Z軸の正の方向は画面を離れて視聴者に直面することです。 SASS構文エラーを回避するには、ブラケットが必要です。ポリゴンのパラセント距離の計算については、後で説明します。

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

要素の参照システムを変換した後、カルーセル全体をその（新しい）y軸回転で回転させることができます：

<figure></figure>

この回転の詳細は後で返します。

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

他の画像を変換し続けましょう。絶対的なポジショニングを使用して、画像は内部に積み重ねられています

：

<figure></figure> これは、その後の変換の予備ステップにすぎないため、

z-index値は無視されます。実際、各画像は、割り当てられた画像の多角形のエッジに依存するカルーセル画像のy軸の周りに角度を回転させることができます。まず、

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

要素と同様に、画像のデフォルト変換オリジンを変更し、ポリゴンの中心に移動します。

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

画像は、新しいy軸について量を回転させることができます。これは($i - 1) * $theta radiansによって与えられます。ここで、$iは画像のインデックス（1から始まる）、$theta = 2 * $PI / $n、ここで$PI数学定数πを意味します。したがって、2番目の画像は$thetaを回転させ、3番目の画像は2 * $thetaを回転させ、最後の画像が回転するまで($n - 1) * $thetaになります。

ネストされたCSS変換の階層的性質により、この画像の相対的な配置は、カルーセルマップの回転中に保存されます（つまり、<figure></figure>の修正されたy軸についての回転）。

この画像の回転量は、sass

コントロールコマンドを使用して割り当てることができます：@for

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

これは、

の代わりにfor...through構造を使用することです。for...toの場合、インデックス変数に割り当てられた最後の値はnの代わりにn-1になるためです。 for...to $i SASS '

補間構文の2つのインスタンスに注意してください。最初の例では、2番目のインスタンスでは、回転プロパティ値を設定するために使用されます。

#{}:nth-child()パラセントリック距離を計算します

ポリゴンのパラセンティック距離の計算は、エッジの数とエッジの幅、つまりおよび変数に依存します。式は次のとおりです

ここで、$nは接線の三角関数です。 $item-width

この式は、いくらかの幾何学と三角法を通じて導出できます。ペンのソースコードでは、この式は、接線関数がSASSで利用できないため、ハードコード値が使用されているため、実装されていません。代わりに、式はJavaScriptデモで完全に実装されます。

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

tan()インターバルカルーセルアイテム

この時点で、カルーセルの画像は並んで「ステッチ」されており、望ましいポリゴン形状を形成します。しかし、ここでは、それらはしっかりと積み重ねられており、3Dカルーセルには通常、それらの間にスペースがあります。この距離は、3D空間の知覚を高めます。これにより、カルーセルの後ろを向いている画像を見ることができます。

画像間のこのギャップは、別の構成変数を導入し、それぞれ要素の水平塗りつけとして使用することにより、オプションで追加できます。より正確には、この値の半分を左と右の塗りつぶしとして取得します：

最終結果は、次のデモで見ることができます。

画像は$item-separation属性を使用して半透明になり、カルーセル構造をよりよく説明し、カルーセルルート要素のフレックスレイアウトを使用して、ビューポートで垂直に中央に配置します。 <img alt="CSSとJavaScriptを使用して3D回転カルーセルを構築します" >

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

ローテーションカルーセル画像

テストカルーセル画像の回転を容易にするために、UIコントロールを追加して画像間で前後にナビゲートします。 （CodePenリンクをここに挿入して、回転するカルーセル画像を表示する必要があります）opacity

currImageinteger変数を使用して、どの画像がカルーセルの前にあるかを示します。この変数は、ユーザーが前/次のボタンと対話すると、1つのユニットによって増加または減少します。

更新の後、currImage、カルーセル画像の回転は次の方法で実行されます。

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

（ここおよび次のコードスニペットで、ES6テンプレートリテラルを使用して文字列に式を挿入します。必要に応じて、従来の「連結演算子を使用できます）

ここで、

は以前と同じです：theta

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

回転は

です。次のアイテムに移動するには、反時計回りの回転が必要であり、CSS変換ではこの回転値は負です。 -theta

値はcurrImage範囲に限定されないが、プラス方向と負の両方で無限に成長する可能性があることに注意してください。実際、フロントイメージが最後の（SO [0, numImages – 1]）で、ユーザーが次のボタンをクリックした場合、最初のカルーセル画像の前にcurrImage == n-1>を0にリセットすると、回転角度はcurrImageの変換から0になります。 、以前のすべての画像でカルーセルを反対方向に回転させます。前のボタンが最初の画像である場合、前のボタンがクリックされたときに同様の問題が発生します。 (n-1)*theta

ピッキーであるためには、

データ型が任意に大きな値をとることができないため、currentImageの潜在的なオーバーフローを確認する必要があります。これらのチェックは、デモコードには実装されていません。 Number JavaScript カルーセルグラフのコアを形成する基本的なCSSを見た後、次のようなJavaScriptを使用してさまざまな方法でコンポーネントを強化することが可能になりました。

任意の数の画像

幅画像

パーセント ページ上の複数のカルーセルインスタンス

ギャップサイズやバック可視性など、各インスタンスの構成

> HTML5 DATA-*属性を使用した
• 構成
最初に、StyleSheetからの原点と回転の変換に関連する変数とルールを削除します。
• 次に、スクリプト内の
関数は、インスタンスの初期化を担当します。
• パラメーターは、カルーセル図を保存するDOM要素を指します。

通常、この関数は、ページ上の各カルーセルグラフのオブジェクトを生成するコンストラクターになりますが、ここではカルーセルライブラリを書いていないため、単純な関数で十分です。

同じページに複数のコンポーネントをインスタンス化するために、コードはすべての画像がロードされるのを待機し、

オブジェクトのcarousel()イベントのリスナーを登録し、各要素の

を呼び出して class

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

：

root

3つの主要なタスクを実行します

• ナビゲーション設定。これは、2番目のCodepenデモで説明されているのと同じコードです。
• 設定を変換
• 登録ウィンドウのサイズリスナーのサイズを変更して、カルーセルグラフを適応して新しいビューポートサイズに適応します

変換設定コードをチェックする前に、いくつかの重要な変数と、インスタンス構成に基づいてそれらを初期化する方法をカバーします：

<div class="carousel">
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

画像数（n）は、<figure></figure>要素の子要素の数に従って初期化されます。スライド間の間隔（ギャップ）は、HTML5 data-gapプロパティ（設定されている場合）から初期化されます。バック可視性フラグ（BFC）は、html5のdatasetAPIを使用して読み取られます。これは、後でカルーセルの背面にある画像が表示されているかどうかを判断するために使用されます。

CSS変換を設定

CSS変換関連属性を設定するためのコードは、setupCarousel()にカプセル化されています。このネストされた関数には2つのパラメーターがあります。 1つ目は、Carouselグラフのアイテムの数、つまり上記のn変数です。 2番目のパラメーターsは、カルーセルポリゴンの辺の長さです。先に述べたように、これは画像の幅に等しいので、getComputedStyle()：

を使用してそのうちの1つの現在の幅を読むことができます。

.carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  > * {
    flex: 0 0 auto;
  }

  .figure {
    width: $item-width;
    transform-style: preserve-3d;
    img {
      width: 100%;
      &:not(:first-of-type) {
        display: none /* Just for now */
      }
    }
  }
}

この方法では、パーセンテージ値を使用して画像幅を設定できます。

カルーセルグラフを適応するために、私はウィンドウサイズのイベントのリスナーを登録しました。

setupCarousel()簡単にするために、私はリスナーのサイズを変更しませんでした。

.carousel figure {
  transform-origin: 50% 50% (-$apothem);
}

私が最初に行うことは、渡されたパラメーターと前述の式を使用して、ポリゴンの傍帯距離を計算することです。

この値を使用して、setupCarousel()要素の

>を変更して、カルーセルの新しい回転軸を取得します。

.carousel figure {
  transform: rotateY(/* some amount here */rad);
}

次に、画像スタイルを適用してください：<figure></figure> transform-origin

最初のループは、カルーセルアイテム間のスペースのパディングを割り当てます。 2番目のループは、3D変換をセットアップします。最後のループは、Carousel Diagramの構成で関連するフラグが指定されている場合、裏側を処理します。

.carousel figure img:not(:first-of-type) {
  position: absolute;
  left: 0;
  top: 0;
}

最後に、

を呼び出して、現在の画像を前面に移動します。これは小さなヘルパー関数であり、表示する画像のインデックスを考えると、Y軸の

.img:not(:first-of-type) {
  transform-origin: 50% 50% (-$apothem);
}

要素を回転させてターゲット画像を前面に移動します。ナビゲーションコードは、それを使用して前後に移動します。

これは最終結果であり、複数のカルーセルがインスタンス化され、それぞれが異なる構成を備えたデモンストレーションです。

rotateCarousel()ソースと結論<figure></figure>

.carousel figure img {
  @for $i from 2 through $n {
    &:nth-child(#{$i}) {
      transform: rotateY(#{($i - 1) * $theta}rad);
    }
  }
}

最後に、このチュートリアルを調査してくれた情報源に感謝したいだけです。

コードまたはカルーセル図の機能について質問やコメントがある場合は、以下にメッセージを残してください。

CSSとJavaScriptを使用した3Dロータリーカルーセル図の構築に関する

FAQ 3D回転カルーセル図を適応させる方法は？ 3D回転カルーセルグラフの適応には、CSSでメディアクエリを使用することが含まれます。メディアクエリを使用すると、デバイスの画面サイズに応じて、異なるデバイスに異なるスタイルを適用できます。カルーセルグラフ要素のサイズと位置を、小さな画面に合わせて調整できます。また、デスクトップコンピューターのようなホバー状態がないため、モバイルデバイスのタッチイベントも検討してください。

カルーセルにさらにスライドを追加できますか？

はい、カルーセルにさらにスライドを追加できます。 HTML構造では、順序付けられていないリストにリスト項目を追加できます。各リスト項目はスライドを表します。 CSSの各スライドの回転角を調整して、3Dスペースに正しく配置することを忘れないでください。

ナビゲーションボタンをカルーセル図に追加する方法は？

HTMLとJavaScriptを使用して、カルーセル図にナビゲーションボタンを追加できます。 HTMLでは、前後のナビゲーションに2つのボタンを追加します。 JavaScriptで、これらのボタンにイベントリスナーを追加します。クリックすると、カルーセルの回転を更新して、前または次のスライドを表示する必要があります。

ソリッドカラーの代わりに画像をスライドとして使用できますか？

もちろん、画像をスライドショーとして使用できます。 CSSで背景色を設定する代わりに、スライドごとに背景画像を設定できます。最良の視覚効果のために、画像に正しいサイズと解像度があることを確認してください。

カルーセル図に自動再生機能を追加する方法は？

JavaScriptを使用して

自動再生を追加できます。一定期間後、

関数を使用して、カルーセル図の回転を自動的に更新できます。ユーザーがカルーセルと対話して、予期しない動作を防ぐときに間隔をクリアすることを忘れないでください。

setIntervalカルーセルに移行効果を追加できますか？

はい、CSSを使用してカルーセルに遷移効果を追加できます。

プロパティを使用すると、指定された期間にわたってCSSプロパティのアニメーションの変更が可能になります。カルーセルマップの回転をアニメーション化するために、

属性に適用できます。 transition transformカルーセルマップループを無限にする方法は？

Carouselグラフを無限ループにするには、いくつかのJavaScriptが含まれます。カルーセルが最後のスライドに到達すると、最初のスライドに回転をリセットできます。これにより、人々は無限のループの幻想を与えます。

スライドにテキストを追加できますか？

はい、スライドにテキストを追加できます。 HTMLでは、各リスト項目にテキスト要素を追加できます。 CSSでは、スライドの位置に応じてテキスト要素を見つけて、必要に応じてスタイルを設定します。

カルーセルチャートにフェードエフェクトを追加する方法は？

CSSを使用してフェードエフェクトを追加できます。

属性を使用して

属性と組み合わせて、フェード効果をアニメーション化できます。スライドショーを調整して、カルーセルの位置を調整して、目的の効果を作成します。 opacity

異なる形状をカルーセルとして使用できますか？

はい、異なる形状をカルーセルとして使用できます。カルーセルグラフの形状は、CSSのtransform属性によって決定されます。 transformプロパティの値を調整することにより、キューブ、シリンダー、またはその他の3D形状のカルーセルを作成できます。

以上がCSSとJavaScriptを使用して3D回転カルーセルを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。