Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "which is the 2d rotation function in css3", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "which is the 2d rotation function in css3" can help you solve your doubts.

In css3, the 2d rotation function is the "rotate ()" function; this function can specify the 2d rotation angle of the element in the parameters, in "deg", when the element is set to a positive value, the element rotates clockwise, when it is set to a negative value, the element rotates counterclockwise, and the syntax is "element {transform:rotate (rotation angle);}".

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

What is the 2d rotation function in css3

The 2d rotation function is the rotate () function

The syntax is:

Transform:rotate ()

Rotate function can set the angle of rotation, the parameter in parentheses is its angle, the unit is deg (degree), set the value of the angle, can be positive or negative. If it's positive, it rotates clockwise, and if it's negative, it rotates counterclockwise.

For example:

Make two boxes, the first box is displayed normally, and the second box is rotated at a certain angle. The first box is done with div tags, and the second box refers to a style of type ID, whose name is rotateDiv. Look at the definition of the style, the common style of the two boxes: the div tag is used as the name of the style, which defines its height, width, background color and border. The first box is displayed normally according to the above style, and the second box is displayed in rotateDiv. The transform property is set to the rotate function and rotates 30 degrees clockwise.

The code and effect are shown in the following figure:

Effect picture:

After reading this, the article "which is the 2d rotation function in css3" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.