CSS3詳細説明：トランスフォーム

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);

transform:scale():

意味: 比率; 「1.5」は 1.5 倍に拡大することを意味します。 「そして減らすと負担になる」――。

.demo_transform3{-webkit-transform:scale

transform:translate():

意味: 変更、変位; 以下は、右に 120 ピクセル変位することを意味します。次の「0」の値で十分で、左下方向の変位はマイナスの「-」となります。

.demo_transform4{-webkit-transform:translate

transform の合成:

transform の共通属性は次のとおりです。transition のヘルプを使用して、CSS3 変換の包括的な例を示しましょう:

.demo_transform5 {-webkit -transition:すべて 1 のイーズインアウト;-moz-transition:すべて 1 のイーズインアウト}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew

- ms-transform :rotate(7deg); //-ms は ie カーネル識別コードを表します

-moz-transform:rotate(7deg) //-moz は Firefox カーネル識別コードを表します

-webkit-transform:rotate(7deg); ; 。 。 w3c標準に準拠したこの文章を書き留めておくのがベストです

CSS3:transformの詳しい説明については、関連記事はPHP中国語サイトに注目してください！