What are the angle units in css?-CSS Tutorial-php.cn

What are the angle units in css?

青灯夜游

Release： 2020-11-20 16:26:05

Original

11407 people have browsed it

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.

What are the angle units in css?

##Angle unit in css

1, deg

Degress. A circle has a total of 360 degrees

90deg = 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>

Copy after login

2、grad

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

Copy after login

What are the angle units in css? 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>

Copy after login

4、turn What are the angle units in css?

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>
</html

Copy after login

For more programming-related knowledge, please visit:

Programming Teaching

! ! What are the angle units in css?

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!