基于CSS3的纸牌翻页效果-白红宇

基于CSS3的纸牌翻页效果

阅读量：6709 次

发布时间：2019-06-25

本文共 1927 字，大约阅读时间需要 6 分钟。

由于自己做个小东西，为了增加点儿交互的乐趣，所以在网站中增加了这个纸牌翻转的效果。

纸牌的正面是一张图片，当鼠标hover纸牌时，纸牌3D旋转180度，屏幕上显示的将是纸牌的背面。

这个效果中用到了 CSS3 3D动画的一些东西，在高级浏览器中是没有问题的，IE10以下没戏。接着说下需要注意的地方（记录下来，免得自己都忘了）。

1.首先，是HTML结构

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  2  3  4 旋转demo 5 56 57 58 59 
     
      60     
      
       61         
       
        62             
        
63             
        
         64                 
         标题:
65                 
         作者:
66                 
         时间:
67             
        
68         
       
69     
      
70 
     71 72