Home > Article > Web Front-end > What are the angle units in css?
What are the angle units in css?
- 青灯夜游Original
- 2020-11-20 16:26:0511357browse
The angle units in css are: 1. deg, degree (Degress), a circle has a total of 360 degrees; 2. grad, gradients (Gradians), a circle has a total of 400 gradients; 3. rad, radians (Radians) ), a circle has a total of 2π radians; 4. turn, turns (Turns), a circle has a total of 1 turn.
##Angle unit in css
1, deg
Degress. A circle has a total of 360 degrees90deg = 100grad = 0.25turn ≈ 1.570796326794897rad##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-o-transform:rotate(2deg);
-ms-transform:rotate(2deg);
transform:rotate(2deg);
}
</style>
</head>
<body>
<div>transform:rotate(2deg);</div>
</body>
</html>
2、gradGradians. A circle has a total of 400 gradients
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
##<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2grad);
-webkit-transform:rotate(2grad);
-o-transform:rotate(2grad);
-ms-transform:rotate(2grad);
transform:rotate(2grad);
}
</style>
</head>
<body>
<div>transform:rotate(2grad);</div>
</body>
</html>
3、rad
radians. A circle has a total of 2π radians
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-moz-transform:rotate(2rad);
-webkit-transform:rotate(2rad);
-o-transform:rotate(2rad);
-ms-transform:rotate(2rad);
transform:rotate(2rad);
}
</style>
</head>
<body>
<div>transform:rotate(2rad);</div>
</body>
</html>
4、turn
turn, circle (Turns). A circle has 1 turn in total 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
##<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.test{
height:100px;background:#eee;
-webkit-transform:rotate(.5turn);
-o-transform:rotate(.5turn);
-ms-transform:rotate(.5turn);
transform:rotate(.5turn);
}
</style>
</head>
<body>
<div>transform:rotate(.5turn);</div>
</body>
</htmlFor more programming-related knowledge, please visit:
Programming Teaching! ! 
The above is the detailed content of What are the angle units in css?. For more information, please follow other related articles on the PHP Chinese website!