基于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>

 

posted @ 2013-12-25 10:27  /vimer  阅读(980)  评论(0)  编辑  收藏  举报