[CSS3 Advanced] クールな 3D 回転パース_​​html/css_WEB-ITnose

以前、react+webpack を学んでいたのですが、たまたま webpack 公式サイトの前を通りかかり、一番上にあるロゴを見てとても興味を持ちました。

最近、自分の CSS3 スキルが弱すぎると感じ、CSS3 についてもっと学びたいと思ったので、このロゴを入り口として、関連する CSS3 プロパティを勉強して学習しました。 webpackのLOGOアニメーション効果は一見難しくないのですが、理解が深まると実は奥深い知識が詰まっていると感じたので、かなり苦労して関連するCSS3アニメーション効果を一連にしてみました。

互換性を重視せずに、まずデモに移動し、Chrome で開いてください。

この記事の完全なコードとその他の CSS3 効果は、私の github で見ることができます。スターを付けていただければ幸いです。

まあ、デモを開けない人もいるかもしれないし、ページがめちゃくちゃになっているかもしれません。以下にいくつかのレンダリングを示します: (写真は少し大きいので、しばらくお待ちください)

Cube 3D 回転

3D パース写真の壁

Jump The note

CSS3 に習熟している人にとっては、おそらく上記の効果は朝飯前のことであり、この記事を書く目的も私自身の学習と蓄積の過程です。興味があるなら読み続けてください。

実際、CSS3 のエフェクトはすべて純粋な CSS で実装されているのですが、そうは言っても、CSS を深く勉強すればするほど、自分は CSS を理解できていないように感じます。 、これらの効果の実際的なシナリオは大きくありませんが、野心的なフロントエンドとして、これらの特性をよく理解する必要があると思います。

それで、この記事で次に私が話すことはおそらく次のとおりです:

transform-style: 3D 3 次元効果の保存

パースペクティブとパースペクティブ原点の 3D ビュー距離、パースペクティブ/被写界深度効果

CSS3 フィルター CSS3 filter

transparent、radial -gradient 透明度およびグラデーション

transform-style

CSS3 を使用して 3D 効果を実現するには、最も重要なことは、transform-style 属性を使用することです。 transform-style には 2 つの値しか選択できません:

// 语法：transform-style: flat|preserve-3d;transform-style: flat; // 默认，子元素将不保留其 3D 位置transform-style: preserve-3d; // 子元素将保留其 3D 位置。

コンテナのtransform-style属性値をpreserve-3dとして指定すると、コンテナの子孫要素に3D効果が与えられます。ビット抽象、つまり、現在の親コンテナにpreserve-3d値が設定された後、その子要素は、親要素が配置されている平面を基準にして3D変形操作を実行できます。

transform-style:preserve-3d で親要素が設定されている場合、子要素に対して 3D 変形操作を実行できます。3D 変形は、transform 属性を使用して、または指定された方法で設定できます。関数または 3 次元行列を使用して要素を変換します。

1. 3D 変位操作を実行するには、translateX(length)、translateY(length)、translateZ(length) を使用します。または、translate3d(x ,y,z);

2 に結合することもできます。scaleX()、scaleY()、scaleY() を使用して 3D スケーリング操作を実行することも、scale3d(number,number,number) に結合することもできます。 );

3 、rotateX(angle)、rotateY(angle)、rotateZ(angle) を使用して 3D 回転操作を実行するか、これらを組み合わせてrotate3d(Xangle,Yangle,Zangle) にすることができます。

API を学習するには、他の人の要約や変換スタイルの API を利用するだけでは満足せず、ソースにアクセスすることをお勧めします。

ここで言及したいのは、3D 座標軸、つまり X、Y、Z 軸を中心とした 3 軸です。これは難しいことではありません。空間をイメージするのが難しい場合は、API に従ってください。各軸を中心に回転します。 理解しました:

上記を理解した後、実際に立方体を作成できます。ことわざにあるように、練習は真の知識をもたらします。キューブを取得する方法を段階的に見てみましょう。

1. 6つの正方形を用意します

これは分かりやすいですが、立方体には6つの面があり、それらを同じ親コンテナーの下にラップします。 -3D、こんな感じ 次に、6 つの面に対して 3D 変換操作を実行できます。デモンストレーションの便宜上、異なる色の 6 つの面を使用します。

上の図は、もちろん 6 つの面があることを示しています。 6 つの正方形の div を設定する必要があります。絶対的な配置とオーバーラップの場合は、次のようになります。1 つのサーフェスのみが表示されます:

2. 最終的な見栄えを良くするために、親コンテナの簡単な変形を行います

まず親コンテナを変更する必要があります。コンテナを変形し、上記の回転属性を使用してコンテナの角度を変更します。

.cube-container{    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);    transform: rotateX(-33.5deg) rotateY(45deg);}

そして、変形後は、次のようなグラフィックが得られます。この時点では、6 つの div 面はまだ重なっています。

3. 各顔に 3D 変換を実行します

接下来就是对每个面进行 3D 变换了，运用 rotate 可以对 div 平面进行旋转，运用 translate 可以对 div 平面进行平移，而且要记住现在我们是在三维空间内变换，转啊转啊，我们可能会得到这样的形状：

算好旋转角度和偏移距离，最后上面的 6 个面就可以完美拼成一个立方体咯！为了效果更好，我给每个面增加一些透明度，最后得到一个完整的立方体：

为了更有立体感，我们可以调整父容器的旋转角度，旋转看上去更立体的角度:

至此，一个 3D 立方体就完成了。写这篇文章的时候，本来到这里，这一块应该就结束了，但是写到这里的时候，突然突发奇想，既然正方体可以（正六面体），那么正四面体，正八面体甚至球体应该也能做出来吧？

嗯，没有按住躁动的心，立马动手尝试了一番，最后做出了下面的两个：

就不再详细讨论如何一步一步得到这两个了，有兴趣的可以去我的 github 上看看源码，或者直接和我讨论交流，简单的谈谈思路：

正四面体

和正方体一样，我们首先要准备 4 个三角形（下面会详细讲如何利用 CSS3 制作一个三角形 div），注意 4 个三角形应该是重叠在一起的，然后将其中三个分别沿着三条边的中心点旋转 70.5 度（正四面体临面夹角），就可以得到一个正四面体。

注意沿着三条边的中心点旋转 70.5 度这句话，意思是每个图形要定位一次旋转中心，也就是 transform-origin 属性，它允许我们设置旋转元素的基点位置。

球体

上面的 GIF 图因为添加了 animation 动画效果，看上去很像一个球体在运动，其实只用了 4 个 div，每个 div 利用 border-radius:100% 设置为圆形，然后以中心点为基准，每个圆形 div 绕 Y 轴旋转不同的角度，再让整个圆形容器绕 Y 轴动起来，就可以得到这样一个效果了。

perspective and perspective-origin 3D视距，透视/景深效果

继续说 3D ，接下来要说的属性是 persepective 和 perspective-origin 。

persepective

// 语法perspective: number|none;

perspective 为一个元素设置三维透视的距离，仅作用于元素的后代，而不是其元素本身。

简单来说，当元素没有设置 perspective 时，也就是当 perspective:none/0 时所有后代元素被压缩在同一个二维平面上，不存在景深的效果。

而如果设置 perspective 后，将会看到三维的效果。

perspective-origin

perspective-origin 表示 3D 元素透视视角的基点位置，默认的透视视角中心在容器是 perspective 所在的元素，而不是他的后代元素的中点，也就是 perspective-origin: 50% 50%。

// 语法perspective-origin: x-axis y-axis;// x-axis : 定义该视图在 x 轴上的位置。默认值：50%// y-axis : 定义该视图在 y 轴上的位置。默认值：50%

值得注意的是，CSS3 3D 变换中的透视的透视点是在浏览器的前方。

说总是很难理解，运用上面我们做出来的正方体试验一下，我设置了正方体的边长为 50 px ，这里设置正方体容器 cuber-inner 的 persepective 的为 100 px，而 perspective-origin 保持为默认值：

-webkit-perspective-origin: 50% 50%;perspective-origin: 50% 50%;-webkit-perspective: 100px;perspective: 100px;

上面这样设置，也就是相当于我站在 100px 的长度外去看这个立方体，效果如下：

通过调整 persepective 和 perspective-origin 的值，可以看到不一样的图形，这个很好理解，我们观测一个物体的角度和距离物体的距离不断发生改变，我们看的物体也是不一样的，嗯想象一下小学课文，杨桃和星星，就能容易明白了。

需要提出的是，我上面的几个正多面体图形和球形图形是没有加上 persepective 值的，感兴趣的可以加上试一下看看效果。

 

3D 透视照片墙

回到文章一开始我贴的那个 3D 照片墙，运用 transform-style: preserve-3d 和 persepective ，可以做出效果很好的这种 3D 照片墙旋转效果。

代码就不贴了，本文已经很长了，只是简单的谈谈原理，感兴趣的去扒源码看看。

1、设立一个舞台，也就是包裹旋转的图片们的容器，给他设置一个 persepective 距离，以及 transform-style: preserve-3d 让后代可以进行 3D 变换；

2. N 枚の写真を用意し、それらをコンテナー内に配置します。N のサイズは個人の好みによって異なります。写真の 3D カルーセル効果は、Y 軸を中心に回転します。追加した画像の数について、各画像を 360° の円周角で均等に分割しました。つまり、各画像を Y 軸の周りを固定角度で回転させ、順番に広げます。 (下の写真は概略的な効果で、角度と透明度を調整しました)

3. この時点で、N 個の画像を重ねる必要があるため、ここでの重要なステップは、translateZ(length) を使用して画像を平行移動させることです。つまり、translateZ を使用すると、画像を近づけることができます。または、前のステップで画像に異なる回転 Y() 角度を設定したため、N 枚の画像にtranslateZ を設定した後、画像は自然に広がります。中点を円の中心として、次のようになります:

4 最後に、アニメーションを使用して、ステージ、つまり画像を包むコンテナを Y 軸を中心に回転させます (rotateY)。 , するとメリーゴーランドのような3Dフォトウォールエフェクトが完成します！

ここで注意すべき点は、単一の画像のパースペクティブの値とtranslateZ(length)の値がtranslateZ(length)の値より大きくなければならないということです。そうしないと、後ろを走っているステージと同じになります。そしてそれがうまくいったことは間違いなくわかりません。

CSS3 フィルター CSS3 フィルター

透明、放射状グラデーションの透明度とグラデーション

についてお話し続けたいと思いました

これらはアニメーション効果を向上させることができるいくつかの CSS3 プロパティですが、この記事はすでに非常に充実していると感じていますまた、これら 2 つの属性については少し話が逸れるので、詳しく説明するために別の記事を書く予定です。

この記事では触れていませんが、非常に役立つ 2 つの詳細について説明します。興味のある方は、次で詳しく説明します。

1. 変換の代わりに、transform3d API を使用します。 API を使用して強制的に開きます。

2. CSS3 will-change を使用して、ページのスクロール、アニメーション、その他のレンダリングのパフォーマンスを向上させます

OK、この記事はここで終わります。ご質問やご提案がございましたら、お気軽にコメントしてください。コミュニケーション、オリジナルの記事、限られた文体、少しの才能とわずかな知識で記事に間違いがある場合は、お知らせください。

この記事の完全なコードとその他の CSS3 効果は、私の github でご覧いただけます。星を付けていただければ幸いです。

この記事のデモを表示するには、私をクリックしてください。

この記事が役に立った場合は、「おすすめ」をクリックしてください。記事を書くのは簡単ではありません。