CSS3 Transform properties in detail (skew, rotate, translate, scale)

Write this article is because in a front-end QQ Group, netizen "Adzuki Bean" (should he ask to appear his net name ...) ), ask skew angle how to calculate, because he read a lot of articles still can't understand skew principle. So, I think it is necessary to write a blog, to help those who do not understand, let them read the text to understand.

Go to the Chase:

First of all, the XY axis of the computer screen is not the same as what we normally call a Cartesian coordinate system. Such as:

The box on the figure represents our computer screen, the origin is the upper left corner of the screen, vertical down to the x-axis positive direction, the horizontal right is the y-axis positive direction.

1, Tilt skew

Look at the picture first

There are skew parameters at the bottom of each diagram. The thick red lines are projections in the horizontal vertical direction, and their lengths are equal to the non-sloping edges on the left. The angle represented by the two parameters is the angle of the black mark in the figure. From the above we can also see: SKEWX is represented with the x-axis tilt angle, the direction is counterclockwise; Skewy is the angle that represents the tilt of the y-axis, the direction is clockwise.

But note that, for example, when using skew (60,60), the angle of the algorithm is not the above, because when the angle of two parameters are greater than 45, we actually see the opposite side of the graph, that is, the length and width of the swap position. We can see that the mydiv on the picture is indeed inverted .

At this point the yellow is the projection of the rectangle, you can compare with the original image on the left. And the original coarse red line is wrong, wrong, wrong!!! say a few more times first. and the angle is the black mark out!

Other angles, we can also push a push.

It is necessary to note that the default origin of skew Transform-origin is the center point of this object . This is also the second line I have an orange string, is to find the center point, and then get the projection.

If you do not understand the above, look at my projection, first know how the angle is marked, and then remember this sentence: Whether it is a direction of tilt, or two directions together, the final length of the projection on the x, Y axis is constant, that is, the parameters are 0 times the length . but the projection should pay attention to the angle of rotation. in order to keep the projection length constant, it is necessary to lengthen the shape, that is, deformation. So if you want to experiment, you can't get the result, because the actual is not deformed.

If you really understand, you can draw the final result by hand.

Skew effect experience skewx effect experience skewy effect experience

2. 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.

Rotate () The default rotation center is the midpoint of the picture

I used to write a clock with rotate, get the current time of the computer, and then display, start timing, specific as:

Source code See I wrote earlier: JavaScript instance--time and date Chapter

And Rotatex,rotatey is, this hands-on operation can understand, remember the center of rotation is the center of the graph.

Rotatex Experience effect Rotatey experience effect rotate effect experience

3. 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.

It is important to note that the scaledoes not look at the XY axis, but rather the horizontal vertical. See the following example for details:

The above three were scale (0.5,2), scale (1.1,1.1);

Scale effect experience

4. 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.

This relatively simple is not much to say, with the relative properties a bit like. It also does not look at the XY axis.

Translatex Horizontal Mobile Experience Translatey vertical mobile experience translate effect experience

Combination

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

Reference article:

1, CSS3 new style big analysis: [7]skew element deformation

2, CSS3 Properties transform detailed Chenghou (rotation: rotate, scaling: scale, tilt: Skew, move: Translate)

CSS3 Transform properties in detail (skew, rotate, translate, scale)