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的旋转角度功能。这样,应该是一目了然了。
下一篇
泛域名解析做什么用,怎么操作?