3D変換は、複数の2D約翻訳属性を変換し、表1に記載したように、3Dプロパティを変換します。
表1は、3D変換プロパティ
表2に示すように、3次元変換方法。
表2の3D変換方法
1トランスフォームスタイル
変換形式のグラフィックスは、多くの場合、三次元空間の座標系を変換するために使用され、ここでは説明トランスフォームスタイルの3D変形特性のCSS3セットを見てください。方法変換スタイル指定されたネストされた要素は、3D空間でレンダリングされています。フラットとperserve-3D：二つの主要な属性があります。
次のようにトランスフォームスタイルの属性構文は次のとおりです。
トランスフォームスタイルを：フラット| perserve-3D。
前記値は、デフォルトのフラットは、2D平面にレンダリングされているすべての子要素を示しています。perserve-3dはエレメントが3D空間でレンダリングされているすべての子を表します。トランスフォームスタイルをプロパティは、親要素に設定し、任意の変形要素の上に入れ子にする必要があります。
フィールドの2視点の深さ
フィールドの視点の深さは、3D変形特性に必須です。このプロパティは、観察者の位置に設定され、コーンのビジュアルコンテンツをマッピングして、2次元表示面に置かれています。パースペクティブを指定しない場合は、全てのZは同じタイリング2D平面に空間内のポイントを軸に結果が深さと概念が存在しない変換します。実際には、プロパティの視点のために、我々は、単に視線、および3D空間平面の要素間の距離を設定するユーザとして理解することができるZ. それは、その効果によって決定され、小さい方の値、ユーザおよび3D空間近い平面距離Z、印象的な視覚効果、逆に、値が大きいほど、3D空間平面遠い距離Zのユーザは、視覚的効果が少なく深刻です。
次のように構文の視点属性は次のとおりです。
展望：なし| <長さ>。
なしと長さの値の単位を有する：斜視特性は2つの属性が含まれます。デフォルトの属性は斜視noneです特徴、それは無限の視点3Dオブジェクトを示しますが、平面的であるように思われます。別の<長さ>長さの単位は、ゼロよりも大きい値をとります。そして、そのユニットではないパーセント値としてすることができます。それにより比較的低い強度および3D空間内の非常に小さな変化を作り出す<length>の値が大きいほど、出現の遠い角、。逆に、値が小さいほど、より近い角度は、高強度の角度及び3Dの大きな変化を作成するように見えます。
何の視点の印象を深めるために、小さなケースに従うこと。コードは以下の通りであります：
2つのdiv、各div要素は、画像が含まれているがあります。各divが、Y軸45degそんなに絵を3D空間を確立しています。違いは、私たちは第二のdiv、最初に設定されていないため、フィールド600PXの深さを設定することです。ブラウザで見ると、図1に示されている業績：
フィールドの図1視点深さ
チャートから、我々は二つの絵の違いを見ることができます。親ノードの場合に視点を設定されていない場合、3D映像回転の効果は明らかではないが、親ノードがセット視点である場合、画像のみ3D回転効果。