CSS3トランスフォーム変形プロパティ、2D変形、3D変形

第 15 章: トランスフォーム変形プロパティ

1. 2D変形
2. 3D変形
要約する

1. 2D変形

変換属性を使用すると、要素は回転、移動、拡大縮小、傾斜などの形状変更 (変形と呼ばれます) を受けることができます。次の属性値は、要素の変化するステータスを表します。
ここに画像の説明を挿入します

1.rotate() 回転属性値

変換: 回転(角度値); 単位: 度
例:transform: rotate(45deg);
など:transform: rotate(-45deg);

デフォルトでは、要素は中心点を中心に回転します。
正の角度値は時計回りの回転を示し、
負の角度値は反時計回りの回転を示します。

2.translate() ディスプレイスメント属性値

複合書き込み方式：要素自身の初期位置を原点として要素のオフセット効果を設定

変換: 変換 (水平オフセット、垂直オフセット); 単位: ピクセル値/パーセンテージ
例:transform: translate(200px,300px);
または:transform: translateX(200px) translateY(300px)

個別に記述する: X と Y の文字は大文字にする必要があります

Offset
_ transform: translateX(100px);
_ translationY()のみで設定可能です。
のように：
transform: translateY(200px);

3.scale()スケール属性値

変換: スケール (複数の値をスケール);

デフォルトのスケーリング値は 1 です。正の数値は通常のスケーリングを示し、負の数値は反転スケーリングを示します。

数値範囲:
倍数: 0 ～ 1 の通常の縮小、> 1 の通常の拡大、
倍数: <0、要素の反転 (-1 ～ 0 の反転縮小、-1 未満の反転拡大)。

ズーム倍率値は、水平スケーリングscaleXと垂直スケーリングscaleYを表す 2 つの値に設定できます。したがって、組み合わせてまたは個別に記述することもできます。

4. skew() の傾き属性値

変換: スキュー (傾斜角値); 単位: 度
傾斜角値は、前の 2 つと同じように、水平傾斜スキュー X と垂直傾斜スキュー Y を表す 1 つまたは 2 つの値に設定できます。

5.transform-origin は、origin 属性を変更します。

要素のデフォルトの変更原点は要素の中心点ですが、上記の 4 つの変換の参照点として、transform-origin 属性を使用して変更原点をカスタマイズできます。

変換原点: 水平位置と垂直位置。パーセンテージまたは px ピクセル値として表現できます。

デフォルト値はですtransform-origin:50% 50%; /*是元素的正中心位置：*/。

必要に応じて、変更する原点位置を自分で設定することもできます。
例: 左上隅の頂点を変更の起点として設定します。
transform-origin:0 0;

6. 複合書き込み、順番や組み合わせの変更

上記4つの変形は複写で表現できます

正規の順序:transform: scale() translate() skew() rotate();
順序の問題: 同じ属性値を異なる順序で記述しても結果が異なるため、ローテーションは通常は後から配置されます。
まずコードの一部を見てみましょう。

.wrap .box1{
           /* 先平移，水平移动200px，垂直移动200px，最后旋转45度 */
            transform: translate(200px,200px) rotate(45deg);
        }
.wrap .box2{
           /* 先旋转，旋转45度 ，再水平移动200px，垂直移动200px */
            transform: rotate(45deg) translate(200px,200px) ;
        }

レンダリング:
ここに画像の説明を挿入します
最初に平行移動してから回転する効果は、最初に回転してから平行移動する効果とは完全に異なることがわかります。先に回転させてしまうと、回転の変化によって本来の水平方向と垂直方向の動きが変わってしまうからです。
ここに画像の説明を挿入します

2. 3D変形

3D変形にも2D変形と同様に上記の4つの状態と変化元の変化があります。ここでは 3D 変位と 3D 回転に焦点を当てます。

1. 3D方向感覚

スクリーンを基準面として使用する:

X軸：水平方向、つまり左右方向

Y軸：垂直方向、つまり上下方向

Z軸：X軸とY軸で構成される平面に垂直な方向、つまり画面面に垂直な方向

2. 遠近感のある視覚的な奥行き属性

3D 変化効果を確認するには、ピクセル値で表される被写界深度パースペクティブ属性を設定する必要があります。

被写界深度は視覚的な距離の効果です。視覚的な距離が大きいほど、より遠くまで見えるようになります (通常は少なくとも 600 ピクセルから開始します)。
変形要素自体ではなく、3D 変形要素の親にパースペクティブ属性を追加します。

3.transform-style:preserve-3d; 3D 階層を表示します。

サブ要素に複数の 3D 変形効果がある場合、transform-style: preserve-3d;正しい 3D レベルを表示するには、属性を追加し、神の視点を有効にし、複数のサブ要素の 3D 効果を表示する必要があります。

4. 3D変形

3D ズームと 3D チルトはほとんど使用されず、主に 3D 変位と 3D 回転が使用されます。
3D 変形は、アニメーション、疑似クラス、JS などと組み合わせて実装されることがほとんどです。

3D 変位:

transform: translateX（）X方向（水平方向）の移動量を示します。

transform: translateY（）Y方向(垂直方向)の移動量を示します。

transform: translateZ（）Z方向（X、Yのある面に垂直な方向）の移動量を示します。

transform: translate3d（）3方向への移動量。(注: 他の変形属性値がすべてこの複合書き込み方法をサポートしているわけではない可能性があります)

3D 回転:

transform: translateX()X軸を中心とした回転を表します

transform: translateY()Y軸を中心とした回転を表します

transform: translateZ()Z軸を中心とした回転を表します

具体的な活用事例については、3D属性を使ったドキドキ感と回転する魔法の箱の事例をご覧ください。

要約する

以上がエディタで誰でもわかるようにまとめた2D変形の4つの属性値、回転、変位、拡大縮小、傾きで表現される4つの変形状態と、変更原点属性、およびその複合書き込み方法です。複数の変形状態、特に異なる次数を強調すると、異なる変形結果が得られます。3D 変形では、視覚的な被写界深度と 3D レベルの表示方法について比較的詳細に説明します。様々な資料を参考にしながら、私自身の理解も踏まえて作成しておりますが、誤字・脱字がございましたら、ご指摘・修正を賜りますよう、よろしくお願い申し上げます。