CSS3変換とは何ですか

CSS3 変形とは、transform 属性を使用して、要素に対して回転、歪み、スケーリング、変位、行列、原点、およびその他の種類の変形処理を実行することを指します。要素の変形操作には、rotate() の使用が必要です。 、skew()、scale()、translate()、matrix() およびその他の関数を実装します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

css3 変換とは

CSS3 では、transform 関数を使用して、テキストやテキストの回転、歪み、拡大縮小、移動を実現できます。以下、マトリクスと原点の6種類の変換処理について詳しく説明します。

変形 -- 回転()

div.box{transform: rotate(45deg);} /*顺时针旋转45度*/

変形 -- 歪みスキュー()

div.box{transform:skew(45deg);} 
/*通过skew（）函数将长方形变成平行四边形。*/

Skew() には 3 つの状況があります。

1. skew(x,y) は要素を水平方向と垂直方向に同時にねじります (X 軸と Y 軸はねじれ、同時に特定の角度値に従って変形);

2. skewX(x) は要素を水平方向にのみ歪めます (X 軸の歪み);

3. skewY( y) 要素を垂直方向にのみ変形させます (Y 軸の歪み) 歪み)

Deformation--scalescale()

div.box{transform: scale(1.5,0.5);}

Scale

1.scale(X , Y) により、要素が水平方向と垂直方向に同時にスケールされます (つまり、X 軸と Y 軸が同時にスケールされます)

2.scaleX(x) 要素は水平方向のみにスケーリングします (X 軸のスケーリング)

3.scaleY(y) 要素は垂直方向のみにスケーリングします (Y 軸のスケーリング)

この値を 0.01 から 0.99 までの任意の値に設定すると、要素が縮小し、1.01 以上の値を指定すると要素が拡大します。

変形 -- 変位 translation()

div.box{transform: translate(50px,100px);}  
/*  通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。  */

translate 3 つの状況に分かれます:

1. translation(x,y ) 水平方向と垂直方向に同時に移動します (つまり、X 軸と Y 軸が同時に移動します)

2. TranslationX(x) は水平方向のみに移動します (X 軸は移動します)

3. translationY( Y) は垂直方向のみに移動します (Y 軸の移動)

Transformation--Matrix matrix ()

div.box{transform: matrix(1,0,0,1,100,100);}  /*
    matrix() 6个属性的意思的：第一个宽度比例1就是原大小，
第二个是上下倾斜1就是2倍，2就是3倍，0就是不倾斜
第三个是左右倾斜，数字和第二个一样的意思，
第四个是高度比例1就是原大小，
第五个是X方向的像素位移，X方向就是左右，
第六个是Y方向的像素位移，X方向就是上下
*/

Transformation--Origintransform-origin

div.box{transform-origin: left top;transform: rotate(45deg); }

要素の原点を左上隅に変更し、時計回りに 45 度回転します。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3変換とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。