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

CSS3 変換とは何ですか?

transform の意味: 変更、変形...; 変換

CSS3 変換の共通プロパティは何ですか?

transform のプロパティには、rotate() / skew() /scale() / Translation(,) が含まれており、それらはそれぞれ x と y に分割されます (rotatex() やrotatey() など)。 。

各属性の使用法を詳しく見てみましょう:

transform:rotate():

意味: 回転; ここで、「deg」は「度」を意味します。たとえば、「10deg」は「10 度」を意味します。以下同様です。

ここをクリックして例を表示します

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew():

意味: 斜め;

クリックここで表示例を表示します

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale():

意味: 「1.5」は比率を意味します。 of 1.5 ズームインするには、2 倍にズームインする場合は「2.0」と入力し、ズームアウトするにはマイナスの「-」を入力します。

ここをクリックして例を表示します

.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}

transform:translate():

意味: 変化、変位。以下のように右に120ピクセルシフトします。上にシフトする場合は、その後ろの「0」の値を変更するだけです。左と下にシフトすると、マイナスの「-」になります。

ここをクリックして表示例を表示します

.demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

包括的な変換:

これらは共通の属性です以下では、transition のヘルプを使用して、CSS3 変換の包括的な例を示します。

ここをクリックして例を表示します

.demo_transform5{-webkit-transition:all 1s easy-in-out;-moz-transition:すべて 1 のイーズ -in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg)scale(3.0) Translation(100px,0);-moz-transform:rotate(360deg) skew( -20度) スケール(3.0) 変換(100px,0)}