Deformation processing in the CSS3

In CSS3, you can use the transform feature to rotate, scale, tilt, and move the 4 types of warp processing for text or images.

Deformation--rotating rotate ()

div.box{Transform:/* rotate 45 degrees clockwise *   /

warp-twisted skew ()

div.box{Transform: /* Changes the rectangle to parallelogram through the skew () function. Skew () has three cases: 1, Skew (x, y) to distort the elements in both horizontal and vertical direction (both the X and Y axes are distorted at a certain angular value); 2, skewx (x) only distorts the elements in the horizontal direction (distortion of the x-axis); 3, Skewy (y) Distorts the element only vertically (twisting the y-axis)* /  

Warp-scaling scale ()

div.box{Transform:/* Scaling Scale has three cases: 1, scale (x, y) scales the element horizontally and vertically (that is, simultaneously scaled by the Y-axis) 2, ScaleX (x) The element only scales horizontally (x-axis scale) 3, ScaleY (y) element only vertically scaled (Y-axis scaling) The value of scale () is the default value of 1, The value is set to anything between 0.01 and 0.99, which makes an element smaller, and any value greater than or equal to 1.01 is a function of enlarging the element. */

deformation--displacement translate ()

div.box{Transform: translate (50px,100px);}  /**/

variants-matrix matrices ()

    div.box{Transform: matrix (1,0,0,1,100,100);}   /* Matrix () 6 properties meaning: The first width ratio of 1 is the original size, the second is the upper and lower tilt 1 is twice times, 2 is 3 times times, 0 is not inclined to tilt the third, the number and the second meaning, the fourth is the height ratio 1 is the original size, The fifth is the pixel shift in the x direction, the x direction is the left and right, the sixth is the pixel shift in  the y direction, and the x direction is    up/down.

deformation-origin point Transform-origin

div.box{Transform-origin: Left top;  Transform:/* change the origin of the element to the upper-left corner and then rotate 45 degrees in the clockwise order. */

Deformation processing in the CSS3