css中的角度單位有哪些？
- 青灯夜游原創
- 2020-11-20 16:26:0511380瀏覽
css中的角度單位有：1、deg，度（Degress），一個圓共360度；2、grad，梯度（Gradians），一個圓共400梯度；3、rad，弧度（Radians ），一個圓共2π弧度；4、turn，圈（Turns），一個圓共1圈。
css中的角度單位
##1、deg
度（Degress）。一個圓共360度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>
#2、grad
梯度（Gradians）。一個圓共400梯度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># #弧度（Radians）。一個圓共2π弧度
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##
<!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#4、turn
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
#######rrreee###更多程式相關知識，請造訪：###程式教學###！ ！ ###以上是css中的角度單位有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css怎樣設定字體靠左顯示下一篇：css怎樣設定字體靠左顯示