CSS 数据类型 - angle

CSS 数据类型 <angle> 定义了以度数、梯度、弧度或转弯为单位的角度值。此属性用于渐变和某些转换函数。

可能的值

<number> - 数字可以是正值或负值。

语法


<angle> = number;

需要注意以下几点：

<angle>数据类型包括一个<数字>后跟以下单位之一（如表中所列）。
单位和数字之间不允许有空格。
可以选择在数字 0 之后包含角度单位。
角度前面可以有一个 + 或 - 号，正号顺时针表示，负号逆时针表示。
静态单位属性可以具有等效的角度（例如，90 度相当于 -270 度），但动态属性（例如动画或过渡）的效果可能会有所不同。

下表列出了可用于测量角度的不同单位 -

单位	描述
deg	表示 0 到 360 度之间的角度，以度为单位。一个完整的圆等于 360 度
grad	表示在 0 到 400grad 之间以梯度为单位测量的角度。一个完整的圆等于 400grad。
rad	表示以弧度为单位测量的角度。一个完整的圆等于 2π 弧度，约为 6.2832rad。
turn	表示以圈数为单位测量的角度。一个完整的圆等于 1 圈。

CSS <angle> - deg

以下示例演示了属性转换：rotate（60deg）将盒子旋转 60 度 −


<html>
<head>
<style>
	 	div {	
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 margin: 20px;
	 	 	 transform: rotate(60deg);
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 The box rotate by 60deg.
	 	</div>
</body>
</html>

CSS <angle> - grad

以下示例演示了属性转换：rotate（-45grad）将盒子旋转 -45deg −


<html>
<head>
<style>
	 	div {	
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 margin: 20px;
	 	 	 transform: rotate(-45grad);
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 The box rotate by -45grad.
	 	</div>
</body>
</html>

CSS <angle> - rad

以下示例演示了属性转换：rotate（3.1416rad）将盒子旋转 3.1416rad -


<html>
<head>
<style>
	 	div {	
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 margin: 20px;
	 	 	 transform: rotate(3.1416rad);
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 The box rotate by 3.1416rad.
	 	</div>
</body>
</html>

CSS <angle> - turn

以下示例演示了属性转换：rotate（1.75turn）将盒子旋转 1.75turn −


<html>
<head>
<style>
	 	div {	
	 	 	 height: 100px;
	 	 	 width: 100px;
	 	 	 border: 2px solid blue;
	 	 	 margin: 20px;
	 	 	 transform: rotate(1.75turn);
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 The box rotate by 1.75turn.
	 	</div>
</body>
</html>

本页