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

Tag: Cal als Text try head header with view cloud

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 the zoom multiplier;

• A parameter: Indicates that the magnification is scaled both horizontally and vertically
• Two parameters: The first parameter specifies the zoom magnification in the horizontal direction, and the second parameter specifies the zoom magnification in a vertical direction.

Three. Tilt Skew

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

The parameter represents the tilt angle, unit deg

• A parameter: Indicates the horizontal direction of the tilt angle;
• Two parameters: The first parameter represents the horizontal direction of the tilt angle, the second parameter represents the vertical direction of the tilt angle.

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) such as:

Skewy (10deg) such as:

Skew (30deg, 10deg) such as:

I saw this figure in a moment.

Four. Mobile Translate

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

The parameter represents the moving distance, the unit px,

• A parameter: Indicates the horizontal direction of the moving distance;
• Two parameters: The first parameter represents the horizontal direction of the moving distance, 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

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