现在的位置: 首页 > web前端 > 正文

css 角度单位有哪些

2020年07月03日 web前端 ⁄ 共 1375字 ⁄ 字号 评论关闭

  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中的可用单位的数量多得惊人。

抱歉!评论已关闭.