关于css3的icon翻转

效果比较简单，这里总结一下.

1.基本结构

实现方法可能有很多种,我这里用的是transform: rotateY()方法.

首先结构如下:

<div class="fix-opt">
	
	<a class="front-face" href="">
	
	<img src="" alt="" >
	
	<p>顶部</p>
	
	</a>
	
</div>

反转的实现是准备两层面,一层是hover前的图片,另一层是翻转后的展现,这里是普通的文本.

由于是反转的两层,因此两层都需要设置position:absolute;让它脱离文档流.

2.旋转角度不是180度,而是90度

两层图片不是普通的叠加,也不是普通的反转,而是呈90度的镶嵌.如图:

代码如下(省略无关代码):

	a.front-face img{position: absolute;z-index: 1;transform: rotateY(0deg);}
	a.front-face p{position: absolute;z-index: 1;transform: rotateY(-90deg);}
	a.front-face:hover img{transform: rotateY(90deg);}
	a.front-face:hover p{transform: rotateY(0deg);}

3.自然过度,transition

然而,你会发现转换得十分生硬,可以说是根本没有旋转的体验.因此需要一个过渡.

过渡,自然想到css3的transition.

a.front-face img{transition: all .2s linear;}
a.front-face p{transition:all .2s linear;}

4.两层旋转间的延迟,opacity

太好了,到这一步已经能基本旋转.然而,旋转得十分不自然,为什么呢?

我们思考一下,两层围绕中心点各自在旋转90度,第一层在开始转的时候,第二层也在开始转.因此旋转得轨迹就不是一个圆,而是两边都在翻页.

而正常的旋转是怎样的?思考一下,正常的旋转是应该第一层旋转90度,然后第二层才开始接着旋转90度,形成一个圆的轨迹.

于是乎,刚开始我想到延迟,这里的旋转时间是0.2s,因此文字层(第二层)就延迟0.2s不就行了?

a.front-face p{transition-delay:0.2s;}

但是,并没有那么简单.

第二层延迟是让鼠标mouseover旋转自然了,但是当鼠标离开,mouseout的时候动画会反转演绎.

这时候文字层(第二层)在正面,它会延迟0.2s开始,但是这时候图片层(第一层)已经开始转了,这样简直就不是旋转了.

要做到旋转和反旋转都自然是圆的轨迹,怎么办呢?

两种方法:

1.用js,当旋转结束后,把图片层和文字层的样式transition-delay的值交换,一个延迟0秒,另一个延迟0.2秒,然后切换两个延迟值.

//tq:但是这样就不是纯CSS3实现了,而且十分难处理.

2.思考了各种方法,最后想复杂了,其实可以用opacity(透明度)来解决,图片层是从1到0,文字层是从0到1,在transition的帮助下,两个值切换简单,自然.而且反旋转也会自动调转过来,也就是图片曾0到1,文字层1到0.

        a.front-face img{opacity:1.0}
	
	a.front-face p{opacity:0}
	
	a.front-face:hover img{opacity:0}
	
	a.front-face:hover p{opacity:1.0}

5.硬件GPU加速

硬件加速十分关键,其实这里我看大神的讲解没太搞明白，不过加一句:transform: translateZ(0);可以解决.