ホーム プログラミング言語 Web関連 css3 CSS 3D トランジション (5 フォーム)

CSS 3D トランジション (5 フォーム)


 
 
CSS では、ページ上の要素の2D 変換に加えて、オブジェクト要素に対して 3D 変換を実行することもできます (ページを 3 次元空間と見なして、ページ上の要素を移動、回転、スケーリング、傾斜させます)。 . 2D 変換と同様に、3D 変換は周囲の要素に影響を与えず、他の要素を重ねることができます。ただし、変換された要素は、既定の (変換されていない) 位置のスペースを占有します。

 

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> 

実行結果は次の図のとおりです。

図: translate3d() 関数のデモ
図: translate3d() 関数のデモ

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>

実行結果は次の図のとおりです。

図: translateZ() 関数のデモ
図: translateZ() 関数のデモ

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> 


実行結果は次の図のとおりです。

図: Rotate3d() 関数のデモ
図: Rotate3d() 関数のデモ

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() 関数のデモ

ヒント: 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) と同等; */

5.matrix3d()

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> 

実行結果は次の図のとおりです。

図: matrix3d() 関数のデモ
図: matrix3d() 関数のデモ
 

「CSS 3D トランジション (5 フォーム)」についてわかりやすく解説!絶対に観るべきベスト2動画

CSS 3D Button Animation Tutorial – Layered Effect With CSS3 Transforms