CSS3 Properties Transform Detail Chenghou (rotation: rotate, scaling: scale, tilt: Skew, move: Translate)

In CSS3, you can use the transform function to achieve the rotation, scaling, tilt, and movement of the text or image four types of deformation processing, this article will be described in detail. I. Rotating rotate

Usage: transform:rotate (45DEG);

A total of one parameter "angle", the unit deg is the meaning of degrees, positive number is clockwise rotation, negative number is counterclockwise rotation, the above code function is clockwise rotation 45 degrees. two. Scaling scale

Usage: Transform:scale (0.5) or Transform:scale (0.5, 2);

The parameter represents a zoom multiplier; When one parameter: indicates horizontal and vertical scaling of the magnification at the same time two parameters: the first parameter specifies the horizontal magnification, the second parameter specifies the zoom magnification in the vertical direction. three. Tilt Skew

Usage: Transform:skew (30deg) or Transform:skew (30deg, 30deg);

The parameter represents the tilt angle, when the unit deg one parameter: the tilt angle of the horizontal direction; two parameters: the first parameter represents the horizontal direction of the tilt angle, and the second parameter represents the tilt angle in the vertical direction.

On the calculation of skew tilt angle is not so intuitive on the surface, here is a reference to a Danale drawing example to illustrate:

The first thing to note is the default origin of skew Transform-origin is the center point of this object

Skewx (30deg) as shown below:

Skewy (10deg) as shown below:

Skew (30deg, 10deg) as shown below:

I saw this figure in a moment. four. Mobile Translate

Usage: transform:translate (45px) or Transform:skew (45px, 150px);

The parameter represents the moving distance, the unit px, one parameter: The moving distance in the horizontal direction; two parameters: the first parameter represents the horizontal direction of the moving distance, and the second parameter represents the vertical direction of the moving distance. Five. Datum point Transform-origin

When you use the Transform method to deform a text or an image, the center point of the element is the datum point. Using the Transform-origin property, you can change the datum point of the deformation.

Usage: transform-origin:10px 10px;

A total of two parameters, representing the distance from the origin of the upper left corner, the unit px, the first parameter is relative to the upper left corner of the horizontal direction of the distance, the second parameter is relative to the upper left corner of the vertical direction of the distance;

Two parameters can be set to a specific pixel value, where the first parameter can be specified as left, center, right, and the second parameter can be specified as top, center, bottom. Six. Multi-method combined deformation

Above we describe the use of transform to rotate, scale, tilt, move the method, here is the introduction of a comprehensive use of these methods to the multiple deformation of an element.

Usage: transform:rotate (45deg) scale (0.5) skew (30deg, 30deg) translate (100px, 100px);

The sequence of these four variants can be arbitrary, but the different order results in different variants, because the order of deformation is left-to-right, in this usage, the order of execution is 1.rotate 2.scalse 3.skew 4.translate

Note: Browser support does not introduce, specific use please do specific tests, I hold the morning and evening all browsers will support the attitude of writing this article. This entry was posted on November 19, 2013. belong to the CSS3 classification, was affixed rotate, scale, skew, transform, transform-origin, translate label. The author is listening to the heart _cy.