Detailed description of CSS3 attribute transform and css3transform

Detailed description of CSS3 attribute transform and css3transform

In CSS3, the transform function can be used to implement four types of deformation processing: rotation, scaling, skew, and moving of text or images. This article will introduce this in detail.

1. rotate

Usage: transform: rotate (45deg );

A common parameter "angle", in the unit of deg is the meaning of degree, positive number is clockwise rotation, negative number is counter-clockwise rotation, the role of the above Code is clockwise rotation 45 degrees.

Ii. scale

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

The parameter indicates the zoom factor;

• When one parameter is set: horizontal and vertical scaling at the same time
• Two parameters: the first parameter specifies the horizontal zoom rate, and the second parameter specifies the vertical zoom rate.

Iii. tilting skew

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

The parameter indicates the tilt angle, in deg.

• If one parameter is set, the angle of inclination in the horizontal direction is displayed;
• Two parameters: the first parameter indicates the horizontal tilt angle, and the second parameter indicates the vertical tilt angle.

The calculation method of the skew angle is not that intuitive on the surface. Here, we will give an example to illustrate the chart drawn by a certain developer:

First, it must be noted that the default origin transform-origin of skew is the center point of this object.

SkewX (30deg) such:

SkewY (10deg) such:

Skew (30deg, 10deg) such:

I was able to understand this image in an instant.

4. Move the translate

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

The Unit is px,

• When one parameter is set: the moving distance in the horizontal direction;
• When there are two parameters: the first parameter indicates the moving distance in the horizontal direction, and the second parameter indicates the moving distance in the vertical direction.

5. datum point transform-origin

When the transform method is used for text or image deformation, it is based on the center point of the element. You can use the transform-origin attribute to change the deformation datum point.

Usage: transform-origin: 10px 10px;

There are two parameters in total, indicating the distance from the origin point in the upper left corner, in px. The first parameter indicates the horizontal distance from the origin point in the upper left corner, and the second parameter indicates the vertical distance from the origin point in the upper left corner;

In addition to the specific pixel values, the first parameter can be left, center, or right, and the second parameter can be top, center, or bottom.

6. multi-method combination Deformation

The above describes how to use transform to rotate, scale, tilt, and move elements. Here we will introduce how to use these methods to perform multiple deformation on an element.

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

The order of the four deformation methods can be random, but different sequences lead to different deformation results. The reason is that the order of deformation is performed from left to right, And the execution order in this usage is 1. rotate 2. scalse 3. skew 4. translate

Note: We will not describe the support of browsers. Please perform specific tests during use. I will write this article with the attitude that all browsers will support in the morning and evening.

Reprinted from: http://www.aspnetjia.com/Cont-94.html