CSS3 实现图标旋转效果
CSS3有个transform属性,它可以使将目标对象变形、转换、改变,应用于需要转换角度、变换大小等场景,如图标旋转、背景放大与缩小等。简而言之,transform就是变形、改变之意,它属于CSS3的高级技术。
本文结合实例,给大家简述一个常见的transform应用,就是当我们用鼠标滑向图标按钮时,图标会自动旋转一周,这个效果完全不依赖JS,由CSS3的transform属性就可以完成。
先看效果示例: 米扑科技 (联系我们 ——》 Follow)
Transform简介
CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale、移动translate以及矩阵变形matrix。
1、旋转 rotate(angle)
通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),angle是指旋转角度,如果设置的值为正数表示顺时针旋转,负数则表示逆时针旋转。例如:transform:rotate(30deg),表示顺时针旋转30度。
2、扭曲 skew( [, ])
X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,默认为0deg,例如:transform: skew(30deg, 30deg)。
3、缩放 scale([, ])
提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。例如:transform:scale(2,1.5)。
4、移动 translate([, ])
通过矢量[tx, ty]指定一个2D translation,tx 是第一个过渡值参数,ty 是第二个过渡值参数选项。如果 未被提供,则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素 中心点,也可以根据transform-origin进行改变基点。例如transform:translate(100px,20px)。
5、矩阵变形 matrix(, , , , , )
以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向(X轴)和垂直方向(Y轴)重新定位元素,此属性值使用涉及到数学中的矩阵。
实例:图标旋转
要将图标旋转,只需使用transform的rotate以及transition即可完成旋转的动画效果。本例中,我们准备两张图片作为背景图片,当鼠标滑向图标时,图标做360度旋转运动,html结构如下:
<ul class="icos"> <li class="female"><a href="http://mimvp.com"><i></i>女生</a></li> <li class="arrow"><a href="http://mimvp.com"><i></i>米扑</a></li> </ul>
结合以下CSS3即可完成图标旋转效果。
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); }
HTML完整代码
<!-- Author : mimvp.com Date : 2016.7.4 --> <html> <head> <style type="text/css"> 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; } </style> </head> <body> <ul class="icos"> <li class="female"><a href="http://mimvp.com"><i></i>女生</a></li> <li class="arrow"><a href="http://mimvp.com"><i></i>米扑</a></li> </ul> </body> </html>
示例效果:http://demo.mimvp.com/img_rotate/index.html
示例应用:http://mimvp.com (米扑科技)
原文: helloweba.com
参考推荐:
网站主页设计模板 (布局设计)
网站主页设计模板 (社交图标)
版权所有: 本文系米扑博客原创、转载、摘录,或修订后发表,最后更新于 2016-07-08 02:21:17
侵权处理: 本个人博客,不盈利,若侵犯了您的作品权,请联系博主删除,莫恶意,索钱财,感谢!
转载注明: CSS3 实现图标旋转效果 (米扑博客)