CSS3でtransform属性を使用する方法

CSS3 の transform 属性 は頻繁に使用するので誰もが知っています。そこで、今日はこのtransform の使用方法、transform の使用方法と構文について詳しく分析します。

構文: none|[]* 初期値は none です。

transform-functionfunctionvalue:

matrix(): 行列変換を定義します。

translate(): 要素 object を移動します。

scale(): スケール要素オブジェクト。

rotate(): 要素オブジェクトを回転します。

skew(): 要素オブジェクトを傾斜させます。

例 (互換性のあるブラウザ):

1.rotate() function:transform:rotate(-90deg);-o-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-webkit -transform:回転(-90度);フィルター:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

2.scale()関数:transform:scale(2);-o-transform:scale(2); -moz-transform:scale(2);-webkit-transform:scale(2);

scale に異なるパラメータ値が渡されると、スケーリングアニメーションの効果も異なります。 scale(1,2) は、幅は変更されず、高さが元の 2 倍になることを意味します。 scale(1,-2) は、幅は変更せず、高さを 2 倍にして 180 度回転することを意味します。

3.translate() 関数:transform:translate(4px, 6px);-o-transform:translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform:translate(4px) , 6px); パラメーターには負のピクセル値を指定できます。

4.skew() 関数: 変換: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);-webkit-transform: skew(30deg, -20deg); は要素の形状を変更しますが、回転関数は要素の形状を変更しません。

5.matrix() 関数: 変換: 行列(3,2,3,5,0,0);-o-transform: 行列(3,2,3,5,0,0);-moz-transform :matrix(3,2,3,5,0,0);-webkit-transform:matrix(3,2,3,5,0,0);パラメータは 6 つの値です。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3 のtranslate属性の詳細な紹介

CSS3のbackground-size属性の詳細な紹介

CSS3でのtransform属性の使用に関するチュートリアル

以上がCSS3でtransform属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。