CSS3属性の詳しい説明transform_html/css_WEB-ITnose

CSS3では、変形機能を利用して、文字や画像の回転、拡大縮小、傾き、移動の4種類の変形処理を実現できます。

1. Rotate 回転

使用法:transform:rotate(45deg);

パラメーター「角度」が 1 つあり、単位 deg は角度を意味し、正の数値は時計回りの回転を意味し、負の数値は反時計回りの回転を意味します。コードは「時計回りに 45 度回転」です。

2. スケーリングスケール

使用法:transform:scale(0.5) またはtransform:scale(0.5, 2);

パラメータはスケーリング係数を表します

1つのパラメータは、倍率の水平および垂直スケーリングを表します。同時

Two パラメータが 2 つある場合、1 番目のパラメータは水平方向のズーム率を指定し、2 番目のパラメータは垂直方向のズーム率を指定します。

3. 傾斜角度

使用法:transform: skew(30deg) またはtransform: skew(30deg, 30deg);

パラメータは傾斜角度を表し、単位は度です

1つのパラメータ: の傾斜角度を表します。水平方向;

2 つのパラメータ: 最初のパラメータは水平方向の傾斜角を表し、2 番目のパラメータは垂直方向の傾斜角を表します。

スキュー角度の計算方法は、表面的にはあまり直感的ではありません。ここでは、あるアーティストが描いた絵に基づいた例を示します。

まず説明する必要があるのは、スキューのデフォルトの原点である、transform-原点は、このオブジェクトの中心点です

skewX(30deg) (以下に示す):

skewY(10deg) (以下に示す):

skew(30deg, 10deg) (以下に示す):

Iこの写真を見てすぐに理解しました。

4. 移動translate

使用法:transform:translate(45px)またはtransform:skew(45px, 150px);

パラメータは移動距離、単位ピクセルを表します

1つのパラメータ:水平方向の移動距離を表します方向;

2 つのパラメータ: 最初のパラメータは水平方向の移動距離を表し、2 番目のパラメータは垂直方向の移動距離を表します。

5. 基点変換原点

transform メソッドを使用してテキストや画像を変換する場合、要素の中心点が基点として使用されます。 transform-origin 属性を使用すると、変換の基点を変更できます。

使用法:transform-origin: 10px 10px;

左上隅の原点からの相対的な距離を示すパラメータが 2 つあり、最初のパラメータは上隅の原点からの水平方向の距離を表します。 2 番目のパラメータは、左上隅からの相対的な距離を表します。

2 つのパラメータに加えて、最初のパラメータを指定することもできます。 2 番目のパラメータは left、center、right として指定でき、top、center、bottom として指定できます。

6. 複数メソッドの組み合わせによる変換

上記では、transform を使用して要素を回転、拡大縮小、傾斜、移動する方法を紹介しました。ここでは、要素に対して複数の変換を実行するためのこれらのメソッドの包括的な使用方法を紹介します。

使用法:transform:rotate(45deg)scale(0.5)skew(30deg, 30deg)translate(100px, 100px);

これら 4 つの変形メソッドの順序は任意ですが、順序が異なると変形結果も異なります。理由は変形です。この使用法での実行順序は 1.rotate 2.scalse 3.translate です

注意: ブラウザのサポートは導入されません。私は遅かれ​​早かれすべてのブラウザがサポートするだろうという姿勢でこの記事を書いています。

転載元: http://www.aspnetjia.com/Cont-94.html