CSS 3D 変換 CSS では、ページ上の要素の 2D 変換に加えて、オブジェクト要素に対して 3D 変換を実行することもできます (ページを、ページ上の要素を移動、回転、拡大縮小、傾斜させるための 3 次元空間として考えることができます)。 。）。 2D 変換と同様、3D 変換は周囲の要素に影響を与えず、他の要素と重なる可能性があります。ただし、変換された要素は引き続きデフォルトの位置 (変換前) のスペースを占有します。
3次元座標系
まず 3 次元座標系について理解しましょう。いわゆる 3 次元座標系は、次の図に示すように、元の 2 次元座標系に Z 軸を追加して 3 次元空間を形成します。
①x軸：水平方向右 注：xの右側が正の値、左側が負の値となります。
②y軸：垂直下方向 注：yは下が正の値、上が負の値となります。
③Z軸：縦画面 注：外側に向かって正の値、内側に向かって負の値
変換プロパティ
3D変形方法
1.translate3d()
translation3d() 関数は、3D 空間内の要素の位置を移動するために使用されます。この変換の特徴は、要素の各方向 (X 軸、Y 軸、Z 軸) のオフセットを 3 方向に定義することです。次元ベクトル座標。関数の構文形式は次のとおりです。
翻訳 3d(tx,ty,tz)
パラメータの説明は次のとおりです。
(1) tx: 要素が水平方向 (X 軸) に移動する距離を表します。
(2) ty: 要素の垂直方向 (Z 軸) の移動距離を表します。
(3) tz: 要素が Z 軸上で移動する距離を示します。このパラメータにはパーセント値は使用できません。
2.translateZ()
関数translateZ()は、3次元座標系のZ軸に沿って要素を移動するために使用されます。関数の構文形式は次のとおりです。
Z(tz) を変換します。
パラメータ tz は、要素が Z 軸上で移動する距離を設定するために使用されます。
ヒント:translateZ(tz); は、translate3d(0, 0, tz); の省略形と同等です。
3.rotate3d()
rotate3d() 関数は、X 軸、Y 軸、または Z 軸に沿った要素の回転角度を設定するために使用されます。この関数は固定軸に沿って要素を回転するだけであり、要素は変形しません。 rotate3d() 関数の構文形式は次のとおりです。
回転 3d(x,y,z,a)
パラメータの説明は次のとおりです。
x: 回転軸の X 軸座標を設定します。
y: 回転軸の Y 軸座標を設定します。
z: 回転軸の Z 軸座標を設定します。
a: 要素の回転角度を設定します。正の角度は時計回り、負の角度は反時計回りを意味します。
4.scale3d()
scale3d() 関数は要素のサイズ (スケーリング) を変更できます。関数の構文形式は次のとおりです。
スケール 3d(sx、sy、sz)
パラメータの説明は次のとおりです。
sx:要素のX軸方向の拡大率を表します。
sy: 要素の Y 軸方向の拡大率を表します。
sz：要素のZ軸方向の拡大率を示します。
5.matrix3d()
行列 3d() 関数は、前に学習した行列() 関数と非常によく似ていますが、行列 3d() 関数は 4 × 4 行列を使用して 3 次元 (3D) 変換を記述することができます。すべての 3D 変換操作は、matrix3d() 関数を通じて一度に実行できます。関数の構文形式は次のとおりです。
行列 3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
パラメータの説明は次のとおりです。
a1、b1、c1、d1、a2、b2、c2、d2、a3、b3、c3、d3、d4: さまざまな 3D 変換を記述するために使用されます。
a4、b4、c4: 要素の変形量を示します。
例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Practicalcontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1。 0><title>Document</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*サブボックスはそのままにしておく3D空間環境*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100%;背景色:ピンク;}.boxdiv:last-child{背景色:アクアマリン;transform:rotateX(60deg);}</style></head><body><div><div><div></div><div> </div></div></div></body></html>実行結果:
