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

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

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

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

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

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

は以前と同じです：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 <

任意の數(shù)の畫像

パーセント ページ上の複數(shù)のカルーセルインスタンス

> HTML5 DATA-*屬性を使用した
• 構成
最初に、StyleSheetからの原點と回転の変換に関連する変數(shù)とルールを削除します。
• 次に、スクリプト內(nèi)の
関數(shù)は、インスタンスの初期化を擔當します。
• パラメーターは、カルーセル図を保存するDOM要素を指します。

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

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

root

3つの主要なタスクを?qū)g行します

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

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

<div class="carousel">
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
    ...
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
  </figure>
</div>

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

CSS変換を設定

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

.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> transform-origin

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

最後に、

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

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

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

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

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

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