What is the css rotation unit?

CSS rotation unit is the unit that specifies the rotation angle of the element, which are degrees (deg), radians (rad) and gradient (grad). Detailed introduction: 1. deg, uses angle to express the size of rotation, positive value means clockwise rotation, negative value means counterclockwise rotation; 2. rad, uses radian value to express the size of rotation, a complete circle is 2π radians, The numerical range is 0 to 2π; 3. grad, which uses a percentage to express the size of the rotation. A complete circle is 400 gradients, and the numerical range is 0 to 400 and so on.

# Operating system for this tutorial: Windows 10 system, Dell G3 computer.

CSS rotation unit is the unit used to specify the rotation angle of the element. CSS defines three rotation units: degrees (deg), radians (rad), and gradients (grad).

Degree (deg): Degree is the most commonly used unit of rotation, and angles are used to express the size of rotation. A complete circle is 360 degrees, and the value range is 0 to 360. Positive values ​​indicate clockwise rotation, negative values ​​indicate counterclockwise rotation. For example, to rotate 45 degrees, you can use the following CSS code:

transform: rotate(45deg);

Radian (rad): Radian is another unit of rotation, and the radian value is used to represent the size of the rotation. A complete circle is 2π radians, and the value range is 0 to 2π. By converting angles to radians, you can use the following formula: radians = angle × π / 180. For example, to rotate π/4 radians (equivalent to 45 degrees), you can use the following CSS code:

transform: rotate(0.7854rad);

Gradient (grad): Gradient is an uncommon unit of rotation that uses a percentage to express the size of the rotation. A complete circle is a gradient of 400, with values ​​ranging from 0 to 400. By converting angles to gradients, you can use the following formula: Gradient = Angle × 10 / 9. For example, to rotate a gradient of 50 (equivalent to 45 degrees), you can use the following CSS code:

transform: rotate(50grad);

These rotation units can be used in the transform attribute of CSS to specify the rotation angle of the element through the rotate() function. The choice of rotation unit depends on specific needs and personal preference. Using appropriate rotation units can make your code clearer and more readable.

The above is the detailed content of What is the css rotation unit?. For more information, please follow other related articles on the PHP Chinese website!