基于CSS3的纸牌翻页效果
由于自己做个小东西,为了增加点儿交互的乐趣,所以在网站中增加了这个纸牌翻转的效果。
纸牌的正面是一张图片,当鼠标hover纸牌时,纸牌3D旋转180度,屏幕上显示的将是纸牌的背面。
这个效果中用到了 CSS3 3D动画的一些东西,在高级浏览器中是没有问题的,IE10以下没戏。接着说下需要注意的地方(记录下来,免得自己都忘了)。
1.首先,是HTML结构
<div class="item"> <div class="card"> <div class="photo"></div> <div class="des"> <p>饵料:</p> <p>鱼竿:</p> <p>鱼钩:</p> </div> </div> </div>
div.item 是整个3D效果的容器,div.card是翻转效果的容器,div.photo是正面,div.des是背面
2.CSS
.item{ position:relative; width:280px; height:180px; -webkit-perspective:500px; -moz-perspective:500px; } .card{ position:absolute; width:100%; height:100%; -webkit-transform-style:preserve-3d; -webkit-transition-duration:1s; -moz-backface-visibility:hidden; -moz-transform-style:preserve-3d; -moz-transition-duration:1s; } .photo,.des{ position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } .photo{ background:url(pople.jpg) no-repeat; } .des{ background-color:#FFFFCC; -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); } .item:hover .card{ -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); }
- 需要设置容器的视角 perspective 属性,这个非常重要,如果不设置这个属性,则没有3D效果。
- 由于
perspective
的3D空间,只能作用于直接的子元素,那么.photeo
和.des
也需要.item的3D空间的话,就需要给 .card
添加 transform-style 这个属性。 - 然后设置 item 的正面(.photo) 和背面(.des) 元素背面是不可见的 backface-visibility:hidden。
- 再然后让背面(.des) 绕Y轴旋转180度,card未旋转的时候,背面是反着的。
- 最后就是在item hover的时候,去旋转card (这个是为了解决firefox下的一个bug,card 旋转的时候在firefox下,当旋转角度离开鼠标hover, 旋转会停下来)。
3.全部代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>旋转demo</title> 5 <style> 6 img{ 7 width:280px; 8 height:180px; 9 -webkit-transform-style:preserve-3d; 10 -moz-transform-style:preserve-3d; 11 } 12 .item{ 13 position:relative; 14 width:280px; 15 height:180px; 16 -webkit-perspective:500px; 17 -moz-perspective:500px; 18 } 19 .card{ 20 position:absolute; 21 width:100%; 22 height:100%;24 -webkit-transform-style:preserve-3d; 25 -webkit-transition-duration:1s; 26 -moz-backface-visibility:hidden; 27 -moz-transform-style:preserve-3d; 28 -moz-transition-duration:1s; 29 } 30 .photo,.des{ 31 position: absolute; 32 width: 100%; 33 height: 100%; 34 -webkit-transform-style:preserve-3d; 35 -webkit-backface-visibility: hidden; 36 -moz-transform-style:preserve-3d; 37 -moz-backface-visibility: hidden; 38 } 39 40 .photo{ 41 background:url(pople.jpg) no-repeat; 42 } 43 44 .des{ 45 background-color:#FFFFCC; 46 -webkit-transform:rotateY(180deg); 47 -moz-transform:rotateY(180deg); 48 } 49 50 .item:hover .card{ 51 -webkit-transform:rotateY(180deg); 52 -moz-transform:rotateY(180deg); 53 } 54 55 </style> 56 </head> 57 58 <body> 59 <center> 60 <div class="item"> 61 <div class="card"> 62 <div class="photo"></div> 63 <div class="des"> 64 <p>标题:</p> 65 <p>作者:</p> 66 <p>时间:</p> 67 </div> 68 </div> 69 </div> 70 </center> 71 </body> 72 </html>