キーテイクアウト

• CSS 3D変換関數(shù)により、水平X軸、垂直Y軸、および深さZ軸の3次元でのHTML要素の操作が可能になります。これには、rotatex（）、rotatey（）、rotatez（）、translate3d（）、translatez（）、scale3d（）、およびperspective（）などの関數(shù)が含まれます。
CSSの変換プロパティは、1つ以上の関數(shù)を割り當てて、変換を要素に適用できます。複數(shù)の変換は、空間分離された関數(shù)によって定義できます。デフォルトではフラットに設定された変換スタイルのプロパティは、3Dスペースに子要素を配置するために3Dを保存するように設定できます。
• CSS 3D変換はすべての最新のブラウザによってサポートされていますが、いくつかの例外があります。たとえば、Internet ExplorerはTransform-Style：Preserve-3dをサポートしておらず、3Dシーンを作成することを不可能にしています。 Safariでは、後部の顔を隠すためにベンダーが使用したWebkit-Backface-Visibilityを使用する必要があります。
CSS 3D変換のパースペクティブプロパティは、オブジェクトが視聴者から離れている距離を定義し、深さの幻想を生み出します。視點の長さが小さいほど、消失點が近く、3D効果が顕著になります。
• この記事では、CSSの新しい3D変換関數(shù)とプロパティを使用して、Webページとアプリケーションに別のディメンションを追加する方法を示します。変換、翻訳、回転、スケーリング、視點など、Z-Index、ブラウザのGotchas、およびこれらの機能の最良のユースケースに関連する問題を見ていきます。
HTML要素は、3次元で変換できます：

水平x軸

垂直y軸、および

深さz-軸

• 2次元畫面では、表面がZ座標ゼロにあることを考えると便利です。正のZ値は、[畫面の前で）あなたに向かってオブジェクトを移動し、負のZ値がオブジェクトを（畫面の後ろ）移動します。視點が追加されると、より遠いz値により、オブジェクトが完全に消える可能性があります。
• ここに注意すべきことがいくつかあります：
CSSは、3次元空間で2次元HTML要素のみを変換できます。要素自體は平らなままで、深さはゼロです。 Zプレーンでスケーリングすることは可能ですが、それは

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

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

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

• インターネットエクスプローラーは変形スタイルをサポートしていません：preserve-3d。これにより、3Dシーンを作成することが不可能になります。
Safariのすべてのバージョンは、後部の顔を非表示にするには、Vendor-Prefixed -Webkit-Backface-Visibilityを使用する必要があります。他のすべてのブラウザは、バックフェイスの視界をサポートしています
次のセクションでは、3D変換特性と関數(shù)について説明します。デモンストレーションページは、ほとんどの使用方法を示しています

変換プロパティ

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

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

たとえば、

<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>

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

翻訳（移動）関數(shù)

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

翻訳関數(shù)を使用して、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軸変換がより明確になります：

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

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

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

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

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

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

回転関數(shù)

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

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

角度を定義できます

• ターン - 例0.5ターンは、クロックワイズの半分のターンです
• deg - degrees、例えば90degは、時計回りに4分の1のターン
です
• rad - ラジアン、例えば-3.1416radは、反時計回りに半分のターン
です
• 卒業(yè)生 - 卒業(yè)生。 1回のフルターンは400グラードなので、-200グラードは反時計回りに半分のターンです。

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

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

y - 回転軸を示すベクトルのy座標（0?1）。
• z - 回転軸を示すベクトルのz座標（0?1）。
a - 回転角。正の角度は時計回りの回転を示し、負は反時計回りです。
Math Masochistsは、Mdnでrotate3d（）の詳細を読むことができます。
• スケーリング（size）関數(shù)
• 関數(shù)scalex（）およびscaley（）は、水平および垂直の平面の要素を伸ばしたり縮小したりします。

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

scale3d（x、y、z）関數(shù)は、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などの長さの単位のみである可能性があります。

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

バックフェイス可視性

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

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

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

  視點

  上記の例は、視點を適用しません。 Z平面の奧深くに移動した要素は、視聴者からどれだけ離れていても、同じサイズのままです。 Perspectiveプロパティはデフォルトではありませんが、プラスの長さに設定できます。たとえば、

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

  

  視點の長さが小さいほど、消失點が近く、3D効果が顕著になります。

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

  

  視點消失點
  デフォルトでは、パースペクティブ消滅ポイントは、変換される要素の中心にあります。 Perspective-Origin：x y;、Where：

  を設定することで変更できます。

  xは、キーワード（左、中央、または右）または要素の幅に対する比較的パーセンテージです（0％、50％、100％はキーワードに相當します）。
  • yは、キーワード（上、中央、または下部）または要素の高さに比べてパーセンテージです（0％、50％、100％はキーワードに相當します）。
  • 左上消失點：

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

  右下の消失點：

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

  視點（）関數(shù)もあります - 試験用、変換：パースペクティブ（200px）。ただし、視點のオリジンを尊重していないようです すべてが一緒になりました

  最後に、スケーリング、回転、および翻訳は、3次元のアフィン変換に16以上の値を必要とする単一のmatrix3d（）関數(shù)で定義できます。

  これはおそらくJavaScriptで使用するのが最適であり、ジオメトリの學位を持つ人が試みます！ CSSの場合、変換関數(shù)のリストはより読みやすく保守可能である可能性があります。

  さらに読み取り

  3次元での作業(yè)は概念的に難しい場合がありますが、CSS変換はオブジェクト操作へのより簡単なルートです。デモンストレーションページは、プロパティと機能がどのように連攜するかを理解するのに役立つインタラクティブなツールを提供します。

  バーチャルリアリティ視聴者、一人稱シューティングゲーム、イメージギャラリー、スターウォーズスクロールテキストなど、CSS 3D変換の見事な例を見つけることができます。多くは、典型的なプロジェクトで使用する可能性が低い概念実証デモンストレーションです。ただし、いくつかの微妙で徐々に強化された3D効果は、Webページやアプリケーションに別の次元を追加できます。
  CSS変換を使用した
  • mdn
  • CSS変換モジュール
  • CSS 3D変換の紹介

  CSS 3D変換関數(shù)についてよく尋ねる質問

  CSSの基本的な3D変換関數(shù)は何ですか？

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

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

  CSSで複數(shù)の3D変換関數(shù)を組み合わせることはできますか？これは、変換プロパティ內のスペースで區(qū)切られた各関數(shù)をリストすることによって行われます。関數(shù)は、リストされている順序で適用されます。これにより、回転、翻訳、スケーリングを組み合わせて複雑な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プロパティを使用して、アニメーションの期間、タイミング関數(shù)、および遅延を制御できます。ただし、一部の古いバージョンはすべての機能を完全にサポートしていない場合があるため、各機能の特定のブラウザサポートを確認することをお勧めします。 CSS 3D変換の現(xiàn)在のブラウザサポートを確認するために使用できますか？ rotatey（）またはrotatex（）関數(shù)を遷移と組み合わせることにより、CSS 3D変換を使用して作成されます?；剀為v數(shù)は、yまたはx軸の周りに要素を反転させ、遷移はフリッピングアニメーションを作成します。遷移期間と遷移 - チミング機能プロパティを使用してフリップの速度とタイミングを制御できます。 ）CSS 3D変換の関數(shù)により、16の値を含む4×4変換マトリックスを指定できます。この関數(shù)は任意の3D変換を表すことができ、複雑な3D効果を作成するための強力なツールになります。ただし、マトリックス數(shù)學を深く理解する必要があるため、使用するのは非常に複雑です。

以上がCSSの3D変換関數(shù)の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。