CSS3で3Dを実装する方法

CSS3 で 3D を実現

インターネットの発展とテクノロジーの進歩により、Web サイトのデザインは 3D 効果を含めてますますクールになってきています。 CSS3 は 3D 効果を実現するための重要なツールの 1 つです。この記事ではCSS3で3Dを実現する方法を紹介します。

1.3D 変換:

3D 変換とは、回転、拡大縮小、移動などの操作を通じて要素に 3D 効果を与えることです。 3D 変換は、「transform」属性を通じて制御できます。

(1) 回転

要素は、X 軸、Y 軸、Z 軸の 3 方向に回転できます。

transform: rotateX(30deg);  //绕X轴旋转30度
transform: rotateY(30deg);  //绕Y轴旋转30度
transform: rotateZ(30deg);  //绕Z轴旋转30度

(2) スケーリング

要素は X 軸、Y 軸、Z 軸に沿ってスケーリングできます。

transform: scaleX(2);  //沿X轴放大2倍
transform: scaleY(2);  //沿Y轴放大2倍
transform: scaleZ(2);  //沿Z轴放大2倍

(3) 移動

要素は X 軸に沿ってスケーリングできます。 Y 軸、Z 軸 軸の 3 方向に移動します。

transform: translateX(100px);  //沿X轴移动100px
transform: translateY(100px);  //沿Y轴移动100px
transform: translateZ(100px);  //沿Z轴移动100px

(4) 複合変換

複数の変換を組み合わせて使用​​できます。

transform: rotateY(30deg) translateX(100px);  //先旋转30度，再沿X轴移动100px

2 . 遠近法:

遠近法効果を使用すると、要素を 3D 空間内にあるように見せることができます。「遠近法」属性を使用して遠近法効果を制御します:

perspective: 500px;  //设置透视点在500px处

3.3D 変換:

3D 変換とは、要素を X 軸または Y 軸に沿って 3D 反転する変換を指し、「transform-style」プロパティと「backface-visibility」プロパティによって制御されます。

(1)transform-style

この属性は、要素がその子要素を 3D に変換するかどうかを設定します。デフォルトは「フラット」です。これは、すべての子要素が影響を受けないことを意味します。 「preserve-3D」に設定すると、子要素も 3D になります。

transform-style: preserve-3D;  //所有子元素都变成3D

(2) backface-visibility

この属性は、要素を反転したときに要素の裏側を表示するかどうかを設定します。デフォルトは「visible」で裏側が表示されます。 「非表示」に設定すると裏面は見えなくなります。

backface-visibility: hidden;  //翻转时背面不可见

4. カスタム アニメーション:

CSS3 アニメーション テクノロジを通じて、要素の複雑なアニメーション効果を実現できるため、Web サイトの美しさとユーザー エクスペリエンスが向上します。

(1) @keyframes キーワード

@keyframes キーワードを使用してアニメーションを定義すると、アニメーションのさまざまな段階にさまざまなスタイルを設定できます。

@keyframes myanimation{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(100px);
    }
}

(2) アニメーション属性

アニメーション属性を使用して要素にカスタム アニメーションを適用します。

animation: myanimation 1s ease-in-out;  //应用名为myanimation的动画，持续时间为1s，缓动效果为ease-in-out

CSS3 によって実現される 3D 効果は、Web サイトの魅力を高めるだけでなく、Web サイトのインタラクティブな効果を豊かにし、ユーザー エクスペリエンスを向上させることもできます。この記事が、皆さんが CSS3 の 3D 機能をより深く理解し、Web サイトのデザインにさらなる柔軟性と革新をもたらすのに役立つことを願っています。

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