helloweba.com 作者:月光光 时间: 2015-09-18 19:15 标签:css3 旋转
CSS3有个transform,它可以使将目标对象变形、转换、改变。应用于需要转换角度、变换大小等场景,如图标旋转、背景放大与缩小等,简而言之,transform就是变形、改变之意,它属于CSS3的高级技术。
查看演示
本文结合实例,给大家简述一个常见的transform应用,就是当我们用鼠标滑向图标按钮时,图标会自动旋转一周,这个效果完全不依赖JS,由css3的transform就可以完成。
在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
1、旋转rotate(
2、扭曲skew(
3、缩放scale(
4、移动translate(
5、矩阵变形matrix(
要将图标旋转,只需使用transform的rotate以及transition即可完成旋转的动画效果。本例中,我们准备两张图片作为背景图片,当鼠标滑向图标时,图标做360度旋转运动,html结构如下:
<ul class="icos"> <li class="female"><a href="#"><i></i>女生</a></li> <li class="arrow"><a href="#"><i></i>箭头</a></li> </ul>
结合以下CSS3即可完成图标旋转效果。
ul { width: 145px; margin: 0 auto; list-style: none; font-size: 30px; } li{padding:10px } li a{width:145px;height:42px;line-height:36px;display:block;color:#333} li a:hover{text-decoration:none} li a i { background: url(icon.png) no-repeat; display: block; width: 42px; height: 32px; position: relative; z-index: 10; float:left; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; } li a:hover i { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } li.female a i { background-position: 0 0; } li.arrow a i { background-position: 0 -50px; }
声明: 本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接:http://www.helloweba.com/view-blog-323.html