3DでCSSをスリンキーにする方法

Braydon Coyerは毎月のCSSアートチャレンジを立ち上げ、CSSと一緒に本のMove Thingsを賞として寄付するように招待しました。 最初の月のテーマは「春」で、すぐに春のおもちゃを思い出させます - スリンキー。

この記事では、CSSを使用して、Slinkyの階下ムーブメントをシミュレートする3D効果を作成する方法について説明します。

SlinkyのHTML構造

Slinkyの動作を柔軟に制御するために、CSSを使用してプロパティをカスタマイズします。これがパグで書かれたHTML構造です：

 -const ring_count = 10;
。容器
  。シーン
    .plane（style = `--ring-count：$ {ring_count}`）
      -Rings = 0とします。
      Rings <ring_count .ring><p>このコードによって生成されたHTMLには、10個のリング要素が含まれており、それぞれがインデックスを表す<code>--index</code>属性を備えています。 </p>
<p></p>
<div><div><div style="--ring-count: 10">
<div style="--index: 0;"></div>
<div style="--index: 1;"></div>
<div style="--index: 2;"></div>
<div style="--index: 3;"></div>
<div style="--index: 4;"></div>
<div style="--index: 5;"></div>
<div style="--index: 6;"></div>
<div style="--index: 7;"></div>
<div style="--index: 8;"></div>
<div style="--index: 9;"></div>
</div></div></div>
<h3> Slinkyの最初のCSSスタイル</h3>
<p>3Dシーンが必要です。次のCSSコードは、Slinkyのプロパティとそのシナリオを定義しています。</p>
<pre class="brush:php;toolbar:false"> ：根 {
   - ボーダー幅：1.2vmin;
   - 詳細：20vmin;
  -stack-height：6vmin;
  -SCENE-SIZE：20VMIN;
   - リングサイズ：calc（var（ -  scene-size） * 0.6）;
  -Plane：radial-Gradient（RGB（0 0 0 / 0.1）50％、透明65％）;
  -Ring-Shadow：RGB（0 0 / 0.5）;
  ---ハイオン：320;
   - -hue-two：210;
  -blur：10px;
   - スピード：1.2秒;
  -BG：#fafafa;
   - リングフィルター：明るさ（1）ドロップシャドウ（0 0 0 var（ - アクセント））;
}

* {
  ボックスサイズ：ボーダーボックス;
  変換スタイル：preserve-3d;
}

。容器 {
  高さ：var（ - シーンサイズ）;
  幅：var（ - シーンサイズ）;
  変身：
    translate3d（0、0、100vmin）
    rotatex（-24deg）rotatey（32deg）
    rotatex（90deg）
    translatez（calc（（var（ -  dept）var（ -  stack-height） * -1）））
    回転（0DEG）;
}

。シーン、
。飛行機 {
  高さ：100％;
  幅：100％;
  位置：相対;
}

。飛行機 {
  変換：translatez（var（ -  dept））;
}

.containerの変換は、最終的にシーンを回転させて見つける複数のステップで構成されています。

スリンキーリングスタイル

次のCSSコードは、各リングを見つけるためにカスタムプロパティ--indexと--ring-countを使用します。

 。指輪 {
  -origin-z：calc（var（ -  stack-height） - （var（ -  stack-height） / var（ -  ring-count）） * var（ -  index））;
   -  hue：var（ -  hue-one）;
  -accent：hsl（var（ -  hue）100％55％）;
  高さ：var（ - リングサイズ）;
  幅：var（ - リングサイズ）;
  ボーダーラジウス：50％;
  境界線：var（ - 境界線）ソリッドvar（ - アクセント）;
  位置：絶対;
  トップ：50％;
  左：50％;
  変換オリジン：calc（100％（var（ - シーンサイズ） * 0.2））50％;
  変換：translate3d（-50％、-50％、var（ -  origin-z））translatez（0）rotatey（0deg）;
}

.RING：nth-​​of-type（odd）{
   -  hue：var（ -  hue-two）;
}

--origin-z Z軸上の各リングの初期位置を計算し、 transformプロパティはリングを見つけて回転させます。

スリンキーリングの変換とアニメーション

Slinkyのフリップと転倒効果を達成するには、各リングのターゲットZ軸位置--destination-zを計算し、変換を制御するためにアニメーションを使用する必要があります。（後続のステップは省略されています3D CSSスリンキー効果。 CSSアニメーションの制限と、GreensockなどのJavaScriptアニメーションライブラリの利点についても説明します。

要約します

この記事では、純粋なCSSを使用して3D構成可能なスリンキー効果を作成する複雑なプロセスを詳細に説明し、HTML構造、CSSスタイル、アニメーションの実装、およびプリプロセッサスタイラスの使用をカバーしています。 CSSアニメーションの制限と改善の提案についても記事で説明しています。 最終効果は、構成可能でカスタマイズ可能な3Dスリンキーアニメーションです。

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