CSSの3D変換関数-CSSチュートリアル-php.cn

回転関数

視点

CSS 3D変換でのパースペクティブ（）関数はどのように機能しますか？ユーザーから離れています。それは、3D変換された要素に深さと視点の幻想を生み出します。関数は1つのパラメーターを取ります。これはピクセルの視点値です。値が低いと、より高い値よりも顕著な視点効果が生まれます。

CSS 3D変換をアニメーション化できますか？

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの3D変換関数

William Shakespeare

Feb 15, 2025 am 10:15 AM

CSSの3D変換関数

キーテイクアウト

CSS 3D変換関数により、水平X軸、垂直Y軸、および深さZ軸の3次元でのHTML要素の操作が可能になります。これには、rotatex（）、rotatey（）、rotatez（）、translate3d（）、translatez（）、scale3d（）、およびperspective（）などの関数が含まれます。
CSS 3D変換はすべての最新のブラウザによってサポートされていますが、いくつかの例外があります。たとえば、Internet ExplorerはTransform-Style：Preserve-3dをサポートしておらず、3Dシーンを作成することを不可能にしています。 Safariでは、後部の顔を隠すためにベンダーが使用したWebkit-Backface-Visibilityを使用する必要があります。
この記事では、CSSの新しい3D変換関数とプロパティを使用して、Webページとアプリケーションに別のディメンションを追加する方法を示します。変換、翻訳、回転、スケーリング、視点など、Z-Index、ブラウザのGotchas、およびこれらの機能の最良のユースケースに関連する問題を見ていきます。

水平x軸

垂直y軸、および

深さz-軸

2次元画面では、表面がZ座標ゼロにあることを考えると便利です。正のZ値は、[画面の前で）あなたに向かってオブジェクトを移動し、負のZ値がオブジェクトを（画面の後ろ）移動します。視点が追加されると、より遠いz値により、オブジェクトが完全に消える可能性があります。
ここに注意すべきことがいくつかあります：

は正方形をキューブに押し出しません。あなたはまだキューブを作成することができますが、それぞれの側面を作るために6つの要素が必要です。

CSS 3D変換はページ効果に最適ですが、次のMinecraftまたはCall of Dutyを作成できるとは期待しないでください。複雑なモデルは、WebGLなどのテクノロジーを使用してより適切に実装されています。

3D変換は、すべての最新のブラウザー（IE10）で十分にサポートされていますが、

インターネットエクスプローラーは変形スタイルをサポートしていません：preserve-3d。これにより、3Dシーンを作成することが不可能になります。

変換プロパティ

任意の要素には、単一の変換プロパティを適用できます。 1つ以上のパラメーターを使用して関数を割り当てることができます。たとえば、

2つ以上の変換が必要な場合、任意の数のスペース分離関数を定義できます。

たとえば、

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

ログイン後にコピー

水平面でスケーリングして垂直に変換するには：

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

ログイン後にコピー

最後に、変換：なし;既存のすべての変換を削除します。

翻訳（移動）関数

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

ログイン後にコピー

翻訳関数を使用して、x軸に沿って要素を水平方向に移動するか、y軸に沿って垂直に移動した可能性があります。

任意の長さユニットを使用できます。パーセントは、変換された要素のサイズを参照して、翻訳された100pxの高さのブロック（80％）が80ピクセル削減します。

3番目の次元に移動すると、translatez：

を使用することもできます。

<span>transform: translateX(50px);        /* 50px to right */
</span><span>transform: translateY(-100%);       /* 100% up */
</span><span>transform: translate(50px, -100%);  /* both together */
</span>

ログイン後にコピー

＃box1、＃box2および＃box3の3つの要素が与えられ、＃box2に翻訳（-200px）が適用され、＃box3に適用されます。結果はかなり刺激的ではありません：

<span>transform: translateZ(-200px);      /* 200px 'into' the screen */
</span>

ログイン後にコピー

ただし、外側の#sceneコンテナ全体を回転させると、z軸変換がより明確になります：

CSSの3D変換関数

shorthandantrate3d関数により、3つの軸すべてに沿って要素を移動できます。

<span><span>#scene</span> {
</span>  <span>transform-style: preserve-3d;
</span>  <span>transform: rotateX(-10deg) rotateY(-10deg);
</span><span>}
</span>

ログイン後にコピー

変換スタイルのプロパティ

CSSの3D変換関数デフォルトで（そして常にIE）、変換スタイルはフラットに設定されています。これは、要素の変換されたすべての子供が要素自体の平面にあることを示しています。言い換えれば、内側の要素は任意の変換を適用することができますが、それらは容器の平らな平面に押しつぶされます：

<span>transform: translate3d(50px, 100%, 7em); /* x, y, z axis */
</span>

ログイン後にコピー

ほとんどの状況では、変換スタイル：preserve-3d;子要素が3D空間に配置されていることを示すために使用する必要があり、コンテナの変換はそれに応じてすべて変換されます。

回転関数

2D Rotate（）関数は実際にZ軸の周りに元素を回転させ、Rotatez（）と同一です。たとえば、

CSSの3D変換関数

rotatex（）は、水平軸の周りを回転し、垂直の周りをrotatey（）を回転させます。

角度を定義できます

ターン - 例0.5ターンは、クロックワイズの半分のターンです

deg - degrees、例えば90degは、時計回りに4分の1のターン
です
rad - ラジアン、例えば-3.1416radは、反時計回りに半分のターン
です
卒業生 - 卒業生。 1回のフルターンは400グラードなので、-200グラードは反時計回りに半分のターンです。

回転の3つの軸を回転3D（）関数で設定できます。やや混乱して、ベクトルを説明する4つの値を受け入れます。

x - 回転軸を示すベクトルのX座標（0〜1）。

z - 回転軸を示すベクトルのz座標（0〜1）。
スケーリング（size）関数
関数scalex（）およびscaley（）は、水平および垂直の平面の要素を伸ばしたり縮小したりします。

scalez（）は、深さ平面に対して同じことを行います。上記の例では、transform：scalez（0.5）;したがって、各要素間の間隔を半分に減らします

scale3d（x、y、z）関数は、1つのコマンドですべての平面でスケーリングを適用できます。たとえば、

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

ログイン後にコピー

Origin

変換

デフォルトでは、要素が回転し、中心点の周りにスケーリングされます。これは、最大3つのスペース分離値で変換オリジンを設定することで変更できます。

1価値の構文：x原点の長さまたは割合。上部と下部が中心xオリジンを備えたy原点を設定する場合、左、中央、右、上または下の単一のキーワードを使用することもできます。

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

ログイン後にコピー

二価値構文：xおよびyの起源。長さ、パーセンテージ、またはキーワードを使用できます

3価値構文：x、y、zの起源。 Z値は、PXやEMなどの長さの単位のみである可能性があります。 CSSの3D変換関数

1つの原点を移動すると、他の旋回面に影響します。たとえば、Transform-Origin：左中心0;原点を左端の中央に移動します。これは、rotatey（）およびrotatez（）関数に影響します

バックフェイス可視性

要素の背面は、xまたはy軸の周りを90以上回転させたが、どちらの方向でも270度未満であると表示されます。背面は事実上鏡像であり、デフォルトでは表示されます。

背面の視界を設定することで背面を隠すことができます：隠されています。 - ＃box2：

バックフェイス視察：非表示;多くの場合、カードフリッピングアニメーションには、2つの要素がカードの前面と背面を表示しますが、一度に1つだけが表示できるのは1つだけです。
視点

上記の例は、視点を適用しません。 Z平面の奥深くに移動した要素は、視聴者からどれだけ離れていても、同じサイズのままです。 Perspectiveプロパティはデフォルトではありませんが、プラスの長さに設定できます。たとえば、
```
.element {
 transform: function1(parameter1, [...parameterN]);
}

```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
視点の長さが小さいほど、消失点が近く、3D効果が顕著になります。
```
.element {
 transform: function1(p1, [...pN]) function2(p1, [...pN]);
}

```
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
視点消失点

デフォルトでは、パースペクティブ消滅ポイントは、変換される要素の中心にあります。 Perspective-Origin：x y;、Where：
を設定することで変更できます。
- yは、キーワード（上、中央、または下部）または要素の高さに比べてパーセンテージです（0％、50％、100％はキーワードに相当します）。
- 左上消失点：
```
.element {
 transform: scaleX(2) translateY(50px);
}

```
ログイン後にコピー
ログイン後にコピー
右下の消失点：
```
transform: translateX(50px); /* 50px to right */
transform: translateY(-100%); /* 100% up */
transform: translate(50px, -100%); /* both together */

```
ログイン後にコピー
ログイン後にコピー
視点（）関数もあります - 試験用、変換：パースペクティブ（200px）。ただし、視点のオリジンを尊重していないようですすべてが一緒になりました

最後に、スケーリング、回転、および翻訳は、3次元のアフィン変換に16以上の値を必要とする単一のmatrix3d（）関数で定義できます。
これはおそらくJavaScriptで使用するのが最適であり、ジオメトリの学位を持つ人が試みます！ CSSの場合、変換関数のリストはより読みやすく保守可能である可能性があります。
さらに読み取り

3次元での作業は概念的に難しい場合がありますが、CSS変換はオブジェクト操作へのより簡単なルートです。デモンストレーションページは、プロパティと機能がどのように連携するかを理解するのに役立つインタラクティブなツールを提供します。
バーチャルリアリティ視聴者、一人称シューティングゲーム、イメージギャラリー、スターウォーズスクロールテキストなど、CSS 3D変換の見事な例を見つけることができます。多くは、典型的なプロジェクトで使用する可能性が低い概念実証デモンストレーションです。ただし、いくつかの微妙で徐々に強化された3D効果は、Webページやアプリケーションに別の次元を追加できます。
- mdn
- CSS変換モジュール
- CSS 3D変換の紹介
CSS 3D変換関数についてよく尋ねる質問

CSSの基本的な3D変換関数は何ですか？

CSS 3D変換関数により、3次元空間の要素を操作できます。基本関数には、rotatex（）、rotatey（）、rotatez（）、translate3d（）、translatez（）、scale3d（）、およびperspective（）が含まれます。各関数は、要素にユニークな効果があります。たとえば、rotatex（）はx軸の周りの要素を回転させ、翻訳（）はz軸に沿って要素を移動します。これらの関数を組み合わせて複雑な3D変換を作成できます。

CSS 3D変換でのパースペクティブ（）関数はどのように機能しますか？ユーザーから離れています。それは、3D変換された要素に深さと視点の幻想を生み出します。関数は1つのパラメーターを取ります。これはピクセルの視点値です。値が低いと、より高い値よりも顕著な視点効果が生まれます。

CSSで複数の3D変換関数を組み合わせることはできますか？これは、変換プロパティ内のスペースで区切られた各関数をリストすることによって行われます。関数は、リストされている順序で適用されます。これにより、回転、翻訳、スケーリングを組み合わせて複雑な3D効果を作成できます。 CSSは、変換が発生する次元です。 2D変換はX軸とY軸の要素に影響しますが、3D変換にはZ軸も含まれ、変換に深さが追加されます。これは、3D変換が3つの次元で要素を回転、移動、および拡張できることを意味し、より没入感と動的効果を生み出します。 CSSのバックフェイス視認性プロパティは、視聴者に面していないときに要素の背面が表示されるかどうかを制御します。このプロパティは、要素が回転し、その背面が表示される3D変換で特に役立ちます。プロパティには、背面を示す「可視」とそれを隠す「隠された」という2つの値が必要です。 🎜> CSS 3D変換の変換オリジン特性により、変換の原点を指定できます。デフォルトでは、変換は要素の中心から発生します。ただし、これを変換オリジンプロパティを使用して要素内の任意のポイントに変更できます。このプロパティは、x、y、およびオプションでz軸を表す2つまたは3つの値を取得します。

CSS 3D変換をアニメーション化できますか？

はい、CSS遷移またはアニメーションを使用してCSS 3D変換をアニメーション化できます。これにより、ユーザーエクスペリエンスを向上させるスムーズで段階的な変換を作成できます。それぞれのCSSプロパティを使用して、アニメーションの期間、タイミング関数、および遅延を制御できます。ただし、一部の古いバージョンはすべての機能を完全にサポートしていない場合があるため、各機能の特定のブラウザサポートを確認することをお勧めします。 CSS 3D変換の現在のブラウザサポートを確認するために使用できますか？ rotatey（）またはrotatex（）関数を遷移と組み合わせることにより、CSS 3D変換を使用して作成されます。回転関数は、yまたはx軸の周りに要素を反転させ、遷移はフリッピングアニメーションを作成します。遷移期間と遷移 - チミング機能プロパティを使用してフリップの速度とタイミングを制御できます。）CSS 3D変換の関数により、16の値を含む4×4変換マトリックスを指定できます。この関数は任意の3D変換を表すことができ、複雑な3D効果を作成するための強力なツールになります。ただし、マトリックス数学を深く理解する必要があるため、使用するのは非常に複雑です。