D変換
**Transformation**は、要素の変位、回転、拡大縮小、その他の効果を可能にするCSS3の破壊的な機能の1つです。
- 移動：平行移動
- 回転：rotate
Dmovetranslateの翻訳
2Dモバイルの2D変換は、ポジショニングと同様に、ページ内の要素の位置を変更できる関数の内部で行われます。
構文
transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);
キーポイント
- スケーリング: scale
- トランスレートの最大の利点は、他の要素の位置に影響を与えないことです。
- translateのパーセント単位は、その要素からの相対値です。
- インラインタグに影響なし
D回転
2Dローテーションとは、エレメントを2次元平面内で時計回りまたは反時計回りに回転させることです。
構文
transform: rotate( ;
再集計
- rotateLeeは度単位で売り、読み込みます。
- 角度が正の場合は時計回り、負の場合は反時計回り。
- デフォルトの回転中心は要素の中心です。
D変換の中心 transform-origin
構文
transform-origin: x y;
再集計
- 末尾の引数 x と y はスペースで区切られていることに注意してください。
- x y デフォルトの回転中心は要素の中心です。
- x y にピクセルまたは方向項を設定することもできます。
Dスケールの変換
Zoomはその名の通り、ズームインとズームアウトを可能にします。このプロパティを要素に追加するとすぐに、その要素がズームインするかズームアウトするかを制御することができます。
構文
transform: scale(x, y);
銘記
- この中のxとyはカンマで区切られていることに注意してください。
- transform: scale(1, 1): 幅と高さが 2 倍になります。
- transform: scale(2, 2): 幅と高さを 2 倍に拡大縮小
- transform: scale(2, 2): 幅と高さを2倍に拡大
- transform: scale(0.5, 0.5): ズームアウト
- transform: scale(0.5, 0.5):
D変換合成の書き方
注意
1.複数のトランスフォームを、transform: translate() rotate() scale() ...の形式で同時に使用します。
2.順番はトランスフォームの効果に影響します。
3.変位と他の属性が同時に存在する場合、変位を最初に置く必要があります。
