Was sind CSS3-Transformationen?

CSS3-Verformung bezieht sich auf die Verwendung des Transformationsattributs zum Durchführen von Drehung, Verzerrung, Skalierung, Verschiebung, Matrix, Ursprung und anderen Arten der Verformungsverarbeitung an Elementen. Die Verformungsoperation von Elementen erfordert die Verwendung von Rotieren (), Skew () und Skalieren (), Translate (), Matrix () und andere zu implementierende Funktionen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist CSS3-Transformation? In CSS3 können Sie die Transformationsfunktion verwenden, um sechs Arten der Transformationsverarbeitung zu erreichen: Rotation, Verzerrung, Skalierung, Verschiebung, Matrix und Ursprung von Text oder Bildern im Detail unten der Verwendung.

Verformung – drehen rotieren()

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

Verformung – verdrehen skew()

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

Skew() hat drei Situationen:
1. skew(x,y) macht das Element horizontal und vertikal gleichzeitig (die X-Achse und die Y-Achse werden gleichzeitig entsprechend einem bestimmten Winkelwert verdreht und verformt);

2. skewX(x) führt nur dazu, dass das Element in horizontaler Richtung verdreht und verformt wird (die X-Achse ist verdreht und deformiert);

3. skewY (y) Verzerrt das Element nur in vertikaler Richtung (Y-Achsen-Verzerrung)

Transformation--Scale Scale()

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

Scale Scale hat drei Situationen:
1. Scale(X,Y) bewirkt, dass das Element gleichzeitig in horizontaler und vertikaler Richtung skaliert wird (d. h. die X-Achse und die Y-Achse werden gleichzeitig skaliert)

2 . Das Element „scaleX(x)“ skaliert nur in horizontaler Richtung (Skalierung der X-Achse)

3. Das Element „scaleY(y)“ skaliert nur in vertikaler Richtung (Skalierung der Y-Achse)

ist 1. Wenn der Wert auf einen Wert zwischen 0,01 und 0,99 eingestellt wird, wird ein Element kleiner; jeder Wert größer oder gleich 1,01 wird verwendet, um ein Element zu verkleinern.

Deformation--displacement translator()

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

translate Wir können es in drei Situationen unterteilen:
1. translator(x,y) bewegt sich gleichzeitig horizontal und vertikal (dh die X-Achse). und Y-Achse bewegen sich gleichzeitig)

2. translatorX(x) bewegt sich nur in horizontaler Richtung (X-Achsenbewegung)

3. translatorY(Y) bewegt sich nur in vertikaler Richtung (Y-Achsenbewegung)

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--Origin transform-origin

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

Ändern Sie den Ursprung des Elements in die obere linke Ecke und drehen Sie es dann um 45 Grad im Uhrzeigersinn.

(Lernvideo-Sharing:

CSS-Video-Tutorial
)

Das obige ist der detaillierte Inhalt vonWas sind CSS3-Transformationen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!