css3旋转如何应用？

　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旋转