CSS3 変換_html/css_WEB-ITnose

transform のプロパティには、rotate() / skew() /scale() / Translation(,) が含まれます。これらはそれぞれ x と y に分割されます (rotatex() やrotatey() など)。すぐ。 。各属性の使用法について学びましょう:

transform:rotate():

意味: 回転。「deg」は「度」を意味します。 「10deg」は「10度」を意味します。以下同様です。

-webkit-transform:rotate(10deg);

transform:skew():

意味: スキュー;

-webkit-transform:skew(20deg);

transform:scale():

意味: 比率。「1.5」は 1.5 倍に拡大することを意味し、縮小する場合は「2.0」と入力する必要があります。 「-」。

-webkit-transform:scale(1.5);

transform:translate():

意味: 変更、移動; 以下は、上に移動する場合、120 ピクセルの移動を意味します。 , 以下の「0」を変更するだけで、左下への変位はマイナスになります。

-webkit-transform:translate(120px,0);

3D 変換が必要な場合は、-webkit-perspective と -webkit-transform-origin を導入する必要があります

-webkit-perspective

パースペクティブ プロパティは、ビューからの 3D 要素の距離をピクセル単位で定義します。このプロパティを使用すると、3D 要素の 3D 要素のビューを変更できます。要素のパースペクティブ属性を定義すると、要素自体ではなく、その子要素にパースペクティブ効果が適用されます。注: パースペクティブ属性は 3D 変換要素にのみ影響します。

-webkit-transform-origin

3D 要素の基点の位置を設定します:

-webkit-perspective:150; -webkit-perspective-origin: 10% 10%;-webkit-perspective-origin:right;