用CSS3做一个图片翻牌效果

效果展示

思路分析

首先是两张图片应该是叠在一起的,然后要让他旋转的时候展示另一张图片。

知识准备:
transform变形,定位,还有backface-visibility,这后面说什么用的。

1、先来搭建HTML结构
用CSS3做一个图片翻牌效果_第1张图片
需要两张图片,可以用自己喜欢的,结构也可以写的简单些。

2、然后再来写下基础样式
用CSS3做一个图片翻牌效果_第2张图片把父容器放在中间点的位置,方便看,这里说下perspective这个属性,视域,通俗来讲就是值越小,效果也扁平化,越大透视效果越强,也是取决于盒子大小而异,这就需要去调下值,到一个合适的位置。

3、再来就是如何让一个旋转时显示另一张图片了
用CSS3做一个图片翻牌效果_第3张图片这里就用到了backface-visibility: hidden;这条属性,意思时当元素旋转到背面时,就不显示隐藏了,就可以用个属性,先让第二张图片旋转180度,让它不显示,这样就可以原本应该在下面的第一张显示了(定位,堆叠级别)。

4、最后添加一个悬停效果
用CSS3做一个图片翻牌效果_第4张图片
悬停时让第一张旋转-180度,第二张再转回来,因为堆叠级别的原因,第二张本来就在第一张的上面,之前看不到,是因为旋转到背面隐藏了,转回来后自然就显示出来了,添加过渡后就大功告成了

这简单,还好看的翻牌效果就分享到这里了。

总结
这整个效果需要理解backface-visibility: hidden;属性,其次就是堆叠级别了,想好谁在上,谁在下。

————纵然是在巨人的肩膀上学习……

你可能感兴趣的:(用CSS3做一个图片翻牌效果)