web CSS3 实现3D动态翻牌效果

使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位，这样两个盒子可以完全重合在一起，需要给父盒子一个

transform-style: preserve-3d;让子盒子翻转时保持3D效果，

perspective: 400px;可以给父盒子一个视距遵守近大远小规则可根据需要设置。

transition: all 0.3s;使用延迟效果更好观察动画

 

当鼠标放上时就会旋转

 

 

 

 以下代码直接复制即可使用。

 1 
 2 
 3 
 4 
 5     
 6     
 7     
 8     
46 
47 
48 
49     

50         
1号正面
51         
1号反面
52     
53     

54         
2号正面
55         
2号反面
56     
57     

58         
3号正面
59         
3号反面
60     
61     

62         
4号正面
63         
4号反面
64     
65 
66 
67