What are CSS3 transformations

CSS3 deformation refers to using the transform attribute to perform rotation, distortion, scaling, displacement, matrix, origin and other types of deformation processing on the element; the deformation operation of the element requires the use of rotate(), skew(), scale (), translate(), matrix() and other functions to implement.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

What is css3 transformation

In CSS3, you can use the transform function to realize the rotation, distortion, scaling, displacement of text or images, The six types of transformation processing of matrix and origin will be explained in detail below.

Deformation--rotate()

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

Deformation--distortion skew()

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

Skew() has three situations:

1. skew(x,y) causes the element to twist in the horizontal and vertical directions at the same time (the X-axis and the Y-axis are twisted and deformed according to a certain angle value at the same time);

2. skewX(x) only distorts the element in the horizontal direction (X-axis distortion);

3. skewY(y) only causes the element to distort in the vertical direction (Y-axis distortion) Distortion)

Deformation--scale scale()

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

Scale has three situations:

1. scale(X , Y) causes the element to scale horizontally and vertically at the same time (that is, the X-axis and Y-axis scale simultaneously)

2. scaleX(x) element only scales horizontally (X-axis scaling)

3. The scaleY(y) element only scales in the vertical direction (Y-axis scaling)

The default value of scale() is 1. When the value is set to any value between 0.01 and 0.99, the effect is An element shrinks; any value greater than or equal to 1.01 causes the element to grow.

Deformation--Displacement translate()

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

translate We are divided into three situations:

1. translate(x,y ) moves horizontally and vertically at the same time (that is, the X-axis and Y-axis move simultaneously)

2. translateX(x) only moves horizontally (X-axis moves)

3. translateY( Y) only moves in the vertical direction (Y-axis movement)

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

Change the origin of the element to the upper left corner, and then rotate it 45 degrees clockwise.

(Learning video sharing: css video tutorial)

The above is the detailed content of What are CSS3 transformations. For more information, please follow other related articles on the PHP Chinese website!