css代码中我们可使用的角度单位:deg、grad、rad、turn,下面详细介绍一下。CSS中凡是牵扯到数值的基本上都与单位相关联,例如:.test{width:180px;}平时我们再制作页面的时候用到的单位也就那么几个,而实际上CSS中的可用单位的数量多得惊人,尤其CSS3的出现更壮大了CSS单位家族。而本文就是简单展示下这些值这些单位。
CSS角度单位
1、deg
度(Degress)。一个圆共360度
90deg=100grad=0.25turn≈1.570796326794897rad
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
transform:rotate(2deg);
2、grad
梯度(Gradians)。一个圆共400梯度
90deg=100grad=0.25turn≈1.570796326794897rad
-moz-transform:rotate(2grad);
-webkit-transform:rotate(2grad);
transform:rotate(2grad);
3、rad
弧度(Radians)。一个圆共2π弧度
90deg=100grad=0.25turn≈1.570796326794897rad
-moz-transform:rotate(2rad);
-webkit-transform:rotate(2rad);
transform:rotate(2rad);
4、turn
转、圈(Turns)。一个圆共1圈
90deg=100grad=0.25turn≈1.570796326794897rad
-webkit-transform:rotate(.5turn);
说明:
degress(角度),一个圆为360°
兼容性
CSSdeg详解
示例:
<!DOCTYPEhtml>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/*Rotatediv*/
transform:rotate(90deg);
-ms-transform:rotate(90deg);/*InternetExplorer*/
-moz-transform:rotate(90deg);/*Firefox*/
-webkit-transform:rotate(90deg);/*Safari和Chrome*/
-o-transform:rotate(90deg);/*Opera*/
line-height:100px;
text-align:center;
}
</style>
</head>
<body>
<div>
<p>HelloWorld</p>
</div>
结果分析:
1.rotate(角度)的效果是让标签以中心为参照点旋转指定的角度。
2.当角度为正值时,顺时针旋转
3.当角度为负值时,逆时针旋转
总之,实际上CSS中的可用单位的数量多得惊人。