How to set the rotate rotation point by css3

This article mainly introduces "how to set the rotate rotation point in css3". In the daily operation, I believe many people have doubts about how to set the rotate rotation point in css3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to set the rotate rotation point in css3". Next, please follow the editor to study!

In css3, you can use the "transform-origin" attribute to set the rotation point when the rotate rotates the element, which is used to change the position of the transformation element, you can change the center point of the rotation, and the syntax is "transform-origin: x-axis y-axis z rotation;".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to set the rotate rotation point by css3

2D rotation refers to rotating the element clockwise or counterclockwise in a two-dimensional plane. (the experience is better when used with transition)

Syntax format:

Transform:rotate (degrees)

Note:

Rotate is followed by degrees, and the unit is deg, for example, transform:rotate (180deg), which means rotation of 180 degrees.

When the angle is positive, it rotates clockwise; when it is negative, it rotates counterclockwise, such as transform:rotate (180deg) and transform:rotate (- 180deg).

The center point of the default rotation is rotated at the center point of the element.

Change the center point of the rotation:

Transform-origin

We can set where the element is rotated.

The transform-Origin attribute allows you to change the location of the transformation element.

A 2D transformation element can change the X and Y axes of an element. 3D converts the element, and you can also change the Z axis of the element.

Syntax format:

Transform-origin: x-axis y-axis z-axis

Note:

The following parameters x and y are separated by spaces, not commas

The center point of the xy default conversion is the center point of the element (50%)

You can also set pixels or orientation nouns to xy, such as top bottom left right center.

Examples are as follows:

123#div1 {position: relative; height: 200px; width: 200px; margin: 100px; padding:10px; border: 1px solid black;} # div2 {padding:50px; position: absolute; border: 1px solid black; background-color: red; transform: rotate (45deg); transform-origin:20% 40%;-ms-transform: rotate (45deg); / * IE 9 * /-ms-transform-origin:20% 40% / * IE 9 * /-webkit-transform: rotate (45deg); / * Safari and Chrome * /-webkit-transform-origin:20% 40%; / * Safari and Chrome * /} HELLO

Output result:

At this point, the study on "how to set the rotate rotation point in css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!