3D 変換も、transform プロパティといくつかの関数を使用して実装する必要があります。次に例を示します。
- matrix3d(): 4×4 マトリックスの形式で 3D 変換を指定します。
- translate3d(): オブジェクトの 3D 変位を指定します.最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応し、3 番目のパラメータは Z 軸に対応します.パラメータは省略できません;
- translateZ(): Z 軸上のオブジェクトの移動を指定します。
- rotate3d(): オブジェクトの 3D 回転角度を指定します。最初の 3 つのパラメーターはそれぞれ X、Y、Z の回転方向を示し、4 番目のパラメーターは回転角度を示します。これは省略できません。
- rotateX(): X 軸上のオブジェクトの回転角度を指定します。
- rotateY(): Y 軸上のオブジェクトの回転角度を指定します。
- rotateZ(): Z 軸上のオブジェクトの回転角度を指定します。
- scale3d(): オブジェクトの 3D スケーリングを指定します.最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応し、3 番目のパラメータは Z 軸に対応します.パラメータは省略できません;
- scaleZ(): 指定されたオブジェクトの Z 軸スケーリング;
- perspective(): 透視距離を指定します。
1.translate3d()
translate3d() 関数は、3D 空間で要素の位置を移動するために使用されます. この変換は、3 次元ベクトル座標を介して各方向 (X 軸、Y 軸、Z 軸) での要素のオフセットを定義することによって特徴付けられます.関数の構文は次のとおりです。
translate3d(tx, ty, tz)
パラメータの説明は次のとおりです。
- tx: 要素が水平方向 (X 軸) に移動する距離を示します。
- ty: 要素が垂直方向 (Z 軸) に移動する距離を示します。
- tz: 要素が Z 軸上で移動する距離を示します。このパラメーターはパーセント値を使用できません。
[例] translate3d() 関数を使用して、要素の 3 次元空間での位置を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #CCC;
}
p {
transform: translate3d(25px, 25px, 50px);
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<p>変換：translate3d(25px, 25px, 50px);</p>
</div>
</body>
</html> 実行結果は次の図のとおりです。
3D 変換は 3 次元座標系を使用しますが、Web ページを奥行きのない 2 次元平面と見なしがちなため、Z 軸に沿った動きを明確に表示することはできません。パースペクティブ属性とパースペクティブ-オリジン属性を使用して、要素に奥行き感を追加できます。つまり、z 軸が高い要素は大きく表示され、その逆も同様です。
2.translateZ()
関数 translateZ() は、3 次元座標系の Z 軸に沿って要素を移動するために使用されます。関数の構文は次のとおりです。
translateZ(tz);
パラメータ tz は、要素が Z 軸上を移動する距離を設定するために使用されます。
ヒント: translateZ(tz); は、translate3d(0, 0, tz); の省略形と同等です。
[例] translateZ() プロパティを使用して、要素が Z 軸に沿って移動する距離を設定します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;/* 兼容 Safari and Chrome */
-webkit-perspective-origin: 10% 10%;/* 兼容 Safari and Chrome */
background-color: #CCC;
}
p {
transform: translateZ(30px);
border: 1px solid red;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>translateZ(30px);</p>
</div>
</body>
</html>
実行結果は次の図のとおりです。
3.rotate3d()
rotate3d() 関数は、X 軸、Y 軸、または Z 軸に沿って要素の回転角度を設定するために使用されます。この関数は、要素を変形させることなく、固定軸に沿って要素を回転させるだけです。 rotate3d() 関数の構文形式は次のとおりです。
回転3d（x、y、z、a）
パラメータの説明は次のとおりです。
- x: 回転軸の X 軸座標を設定します。
- y: 回転軸の Y 軸座標を設定します。
- z: 回転軸の Z 軸座標を設定します。
- a: 要素の回転角度を設定します.正の角度は時計回りの回転を意味し、負の角度は反時計回りの回転を意味します.
[例] 要素を回転するには、rotate3d() 関数を使用します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;
-webkit-perspective-origin: 10% 10%;
border: 3px solid black;
margin: 10px 0px 0px 10px;
}
.transform {
background-color: red;
border: none;
transform: rotate3d(0, 1, 2, 40deg);
}
</style>
</head>
<body>
<div>
<div class="transform">rotate3d(0, 1, 2, 40deg);</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
CSS は、rotate3d() 関数に加えて、rotateX() (X 軸に沿って要素を回転させる)、rotateY() (Y 軸に沿って要素を回転させる)、rotateZ() (Z 軸に沿って要素を回転させる) という 3 つの関数も提供します。エレメントを回転させる軸。 rotateX()、rotateY()、rotateZ() 関数の構文形式は次のとおりです。
rotateX(a) /* 回転3D(1, 0, 0, a)と同等; */
rotateY(a) /* 回転3D(0, 1, 0, a)と同等; */
rotateZ(a) /* 回転3D(0, 0, 1, a)と同等; */
4.scale3d()
The scale3d() function can change the size of element (zoom). 関数の構文は次のとおりです。
scale3d(sx, sy, sz)
パラメータの説明は次のとおりです。
- sx: X 軸方向の要素のズーム率を示します。
- sy: Y 軸方向の要素のズーム率を示します。
- sz: 要素の Z 軸方向のズーム率を示します。
【例】指定した要素をスケールするにはscale3d()関数を使用します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;
-webkit-perspective-origin: 10% 10%;
border: 3px solid black;
margin: 10px 0px 0px 10px;
}
.transform {
background-color: red;
border: none;
transform: scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);
}
</style>
</head>
<body>
<div>
<div class="transform">scale3d(1, 1, 1.5) rotate3d(1, 0, 0, 60deg);</div>
</div>
</body>
</html> 実行結果は次の図のとおりです。
ヒント: scale3d() 関数のパラメータ値が [-1, 1] の範囲を超える場合、要素は対応する方向に拡大されます; パラメータ値が [-1, 1] の範囲にある場合、要素は拡大されます。要素は現在の方向に縮小されます ; パラメータ値が 1 の場合、要素のサイズは変更されません。
scale3d() 関数に加えて、CSS には、要素をスケーリングするための scaleX() (X 軸に沿った要素のスケーリング)、scaleY() (Y 軸に沿った要素のスケーリング)、および scaleZ() (Z 軸に沿った要素のスケーリング) も用意されています。異なる軸スケーリング要素に従って。 scaleX()、scaleY()、scaleZ() 関数の構文形式は次のとおりです。
scaleX(sx) /* scale(sx, 1); および scale3d(sx, 1, 1); と同じ */
scaleY(sy) /* scale(1, sy); および scale3d(1, sy, 1); と同じ */
scaleZ(sz) /* scale3d(1, 1, sz) と同等; */
matrix3d() 関数は、前に学習した matrix() 関数と非常に似ていますが、matrix3d() 関数は 4 × 4 行列を使用して 3 次元 (3D) 変換を記述できます。すべての 3D 変換操作は、matrix3d() 関数を使用して一度に実行できます. 関数の構文は次のとおりです:
matrix3d(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: 要素の変形量を示します。
[例] 3D 変換を定義するには、matrix3d() 関数を使用します。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150;
-webkit-perspective-origin: 10% 10%;
border: 3px solid black;
margin: 10px 0px 0px 10px;
}
.transform {
background-color: red;
border: none;
transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}
</style>
</head>
<body>
<div>
<div class="transform">matrix3d()</div>
</div>
</body>
</html>
実行結果は次の図のとおりです。
