CSS3 Transform プロパティを使用して 3D デザインを作成する方法
公開: 2023-03-16CSS3 変換プロパティに関しては、2D と 3D の 2 つの次元があります。 アニメーション化する場合、要素をある状態から別の状態に変更するために変換が使用されます。 このチュートリアルは、2D アニメーションに関するこのガイドの拡張として機能します。 3D デザインについての洞察と、これらの基本概念を組み合わせて素晴らしいアニメーションを作成する方法について説明します。
3D 変換は非常に詳細であり、さまざまな要素が組み合わされていると複雑になる可能性があるため、基本的なビルディング ブロックから始めることをお勧めします。 これらの概念のいくつかは見慣れたものに見えますが、「z」は 3D で作業するときに新しく見えるものです。 3D 変換は、2D CSS 変換を拡張して z 軸を含め、DOM 要素の 3D 変換を可能にします。
Z軸とは？
z軸への参照がたくさんあります。 それは、何かがあなたに近づいたり遠ざかったりする測定距離と考えるのは簡単です。 正の値であれば、あなたに近いです。 負の値の場合は、あなたから離れています。
3D 変換の例
3D 変換の基本的なプロパティは、 translate3d 、 scale3d 、 rotateX 、 rotateY 、 rotateZ 、 perspective 、 matrix3dです。 translate3d 、 scale3d 、およびmatrix3dには、x、y、および z の引数を取るため、より多くの引数が含まれています。 scale プロパティは角度の値を取り、遠近法も単一の値を取ります。
翻訳
翻訳Z()
これは、z 軸の値のみを使用して 3D 移動を定義します。 2D 移動から x と y を移動したことを覚えているかもしれません。 translateX() 、 translateY() 、およびtranslateZ()の考え方は同じです。それぞれが正しい軸に沿って指定された距離だけ要素を移動する長さの値を取るためです。
この例では、 translateZ(-20px)要素をビューアから 20 ピクセル離します。
この例を作成するためのコード スニペットを次に示します。
-webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);translate3d()
translate3d()関数は、3D 空間で要素の位置を移動するために使用されます。 この変換は、各方向への移動量を定義する座標を指定することによって作成されます。
関数transform: translate3d(20px, -15px, 70px); 正の x 軸に沿って 20 ピクセル、負の y 軸に沿って 15 ピクセル、正の z 軸に沿って 70 ピクセル、イメージを移動します。
これはtranslate3dの例です:
-webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);2 番目の正方形が重なり合っていることは明らかです。 期待したほど劇的に見えないかもしれませんが、perspective プロパティ (このチュートリアルの後半) を追加すると役に立ちます。
回転する
rotate3d()関数は、軸を中心に指定された角度だけ 3D 空間で要素を回転させます。 これは、 rotate(x, y, z, angle)と書くことができます。
回転X()
ピクセル値はここでは機能しません。度である必要があります。 rotateX()メソッドは、指定された角度で要素を x 軸を中心に回転させます。 長方形の方が短いのがわかりますか? x 軸に沿って回転しています。 この例は、55 度の回転を示しています。
-ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);回転Y()
rotateY()メソッドは、y 軸を中心に要素を回転させます。 一番下の四角形が一番上の四角形よりも幅が狭いことに注意してください。 60 度回転しているため、上の長方形ほど広くは見えないように回転しています。
-ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);回転Z()
rotateZ()メソッドは、要素をその z 軸を中心に指定された角度だけ回転させます。 この場合、値は 120 度です。
-ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);回転3d()
関数rotate3d(1, -1, 1, 45deg)画像を y 軸に沿って角度 45 度回転します。 負の値を使用して要素を反対方向に回転できることに注意してください。
これは単一軸の仕様よりも複雑であるため、 rotate3d rotate3d(x,y,z,angle)のように分解できます。 .
これをスタイルするコードは次のようになります。
-ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);基本のテスト
x 軸に沿って時計回りに 45 度。
transform: rotate3d(1, 0, 0, 45deg);y 軸に沿って時計回りに 45 度。
transform: rotate3d(0, 1, 0, 45deg);z 軸に沿って時計回りに 45 度。
transform: rotate3d(0, 0, 1, 45deg); 指定した値によっては、回転が目立たない場合があることに注意してください。 たとえば、これは目立たないでしょう: transform: rotate3d(0, 0, 0, 50deg);
視点
これはおそらく最も「次元的な」変換です。 これは、文字通り視点を得る場所です。 遠近法を設定せずに要素に 3D 変換を適用すると、結果の効果は 3 次元として表示されません。 これは、上記のプロパティにも追加できるものです。
3D 空間をアクティブにするには、要素に遠近法が必要です。 これは 2 つの方法で適用できます: transformプロパティまたはperspectiveプロパティを使用します。
transformプロパティは次のようになりますtransform: perspective(600px); パースペクティブ プロパティは次のようになりますperspective: 600px; .
次の例では、2 つの間で変更を行っているため、コードをよく確認してください。
perspectiveの値は、3D 効果の強さを決定します。 大きなオブジェクトを見たときにどのように感じるかなど、低い値は本当に目立つと考えてください。 値が大きいほど、効果は弱くなります。
消失点の位置もカスタマイズできます。 これは CSS の観点に関連しているため、言及する価値があり、多くの実験を行う必要があります。 デフォルトでは、3D 空間の消失点は中心に配置されます。 消失点の位置を変更するには、perspective-origin プロパティを使用します。 これは次のようになります: perspective-origin: 15% 55% 。
規模
スケールZ()
これは、z 軸の値を与えることによって 3D スケール変換を定義します。 z 軸に沿ってのみスケーリングされるため、スケーリング効果を示すには他の関数が必要です。 長方形が視聴者に向かってどのように出ており、実際に遠近法をどのように示しているかを確認してください。
スケール (Z) を完全に理解するには、値をいじってみると、値が大きくなるほど遠近感が「シャープ」になることがわかります。
scale3d(x,y,z)
scale3d()関数は要素のサイズを変更し、 scale(x, y, z)として記述されます。 scaleZと同様に、 perspectiveで使用しない限り、遠近法が完全にどのように見えるかは明らかではありません。
この例ではこれを使用します。
-ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);簡単な注意: ベクトルの 3 つの座標がすべて等しい場合、スケーリングは均一であり、顕著な違いはありません。
transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */Matrix3d()
2D マトリックスは 6 つの値を取ることができますが、3D マトリックスは 16 (4×4 マトリックス) を取ることができます! すべての詳細を網羅すると非常に長い投稿になるため、この概念をさらに詳しく知りたい場合は、Codepen でのインタラクティブな matrix3d の実験を強くお勧めします。
matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)
作成方法
3D 変形を伴うアニメーション
基本を説明したので、次のステップはインタラクティブなアニメーションの作成です。 CSS3 の変換とトランジションを使用すると、要素は回転、拡大縮小、または遠近法の追加によって、ある状態から別の状態に変化します。
CSS アニメーションを初めて使用する場合は、トランジションがないと、変換中の要素がある状態から別の状態に突然変化することを知っておくことが重要です。 これを防ぐために、トランジションを追加して変更を制御し、より滑らかな外観にすることができます。
カードフリップを作成する方法
トランプが嫌いな人はいますか？ この例では両面カードが使用されており、変形して裏返すと両面を見ることができます。 bodyタグを見ると、多くの効果はperspectiveプロパティから来ています。 500pxに設定しています。 100px のような低い値は、非常に「歪んだ」ように見えます。
開始 HTML は次のとおりです。
<div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>それを実現するのが CSS です。
body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); } 
これは Codepen で見つけることができます。
変換に慣れていない場合、これは興味深いと思われるかもしれませんtransform: rotate(1turn); このユニットは私たちのカードにぴったりです。なぜなら、「ターン」ユニットはまさにその名の通り、つまり 1 つの完全な円だからです。
また、いくつかのイージングを使用して、カスタムの回転方法を作成しました。 これはtransition: all 1s ease-in; .
スニペットの別の 3D プロパティはtransform-style: preserve-3d;です。 . これを含めることで、要素が親要素にとどまるのではなく、3 次元空間で「スイング」できるようになります。
3D 効果のあるテキストを作成する方法
この例は、古い映画のポスターに触発されたものです。 優れた CSS スタイリングを利用できるさまざまな書体が世の中にたくさんあるため、ユニークな書体効果が間違いなく可能です。 このテキストは、独自の変換を行うために、 rotate3dとtransform3d使用しています。
HTML は非常に単純です。
<div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>基本的な CSS は次のとおりです。
.container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }より詳細な CSS と例は、Codepen にあります。
CSS 3D 変換が、あなたのデザインに新しい次元をもたらすことを願っています。 遠近法を利用することは、要素をより立体的に見せるための優れた方法です。 トランジションと組み合わせると、アニメーションを作成する際に多くの可能性があります。