CSS3已经出现很多年了,而且应用也极为广泛。尤其是移动互联网时代,越来越多的网站采用了CSS3进行样式编码。CSS3有非常多的技术特性,比如旋转、阴影、亮度、饱和度、圆角、等等。正好笔者在写一个有关网页元素旋转的布局,那么,下面就讨论一下CSS3旋转角度。

 

先看代码:

div

{

transform:rotate(7deg);

-ms-transform:rotate(7deg);  /* IE 9 */

-moz-transform:rotate(7deg);  /* Firefox */

-webkit-transform:rotate(7deg); /* Safari 和 Chrome */

-o-transform:rotate(7deg);  /* Opera */

}

 

  上面的7deg的意思就是旋转7度,非常简单。

 

  CSS3旋转角度的代码看上去很多,实际上核心部在于transform:rotate(7deg);。但是,为了适用于各类浏览器,笔者还是建议你不要怕麻烦把这些代码都写上吧,毕竟用户体验第一。

 

css3旋转如何应用?

 

  为什么要用CSS3旋转角度功能呢?上图是笔者正在开发的一套酒店智能控制系统,其中空调温度控制功能中的仪表盘就用到了CSS3旋转角度功能。通过触摸仪表盘旋转达到控制空调温度的目的,而仪表盘的旋转就必须要用到CSS3的旋转角度功能。这样,应该是一目了然了。


标签:石家庄网站建设 css3 css3旋转