CSS3实现3D翻牌酷炫效果 | web前端中文站

最近一直在学 css3，发现它实现效果之强大。现在的 css3 已经不在是以前的 css 了，它能做出的功能效果是我们没法想象的了。它可以实现 flash，可以制作一些 js 能做出来的效果,还可以写出 ps 做出来的一些渐变啊圆角啊阴影啊什么的效果，如此之炫的它，我相信已经有很多人对它做了更深的研究了吧。

今天我也在小小的研究了下它，主要是关于它的一些 3d 效果。

所谓的 3d 翻牌效果，其实就是两张图片，一张在前，一张在后，当前面的那张发生旋转后，转到一定角度时后面的图片就会跟着它的步伐一起旋转，只是一个旋转到看不见，而一个刚要转的我们看的见。

具体操作是当鼠标逐渐靠近牌上，图片开始以 z 轴 0~180°进行翻转，当离开时，则以 180°恢复到 0°。具体效果直接上图：

CSS 制作 3D 翻牌酷炫效果

纯 CSS 实现 3D 翻牌

在线演示

具体 3D 翻转代码，html 和 css 代码 demo、图片素材在下面链接：

百度网盘下载 ? ? ?密码：1wyi

==========================

代码如下：

<body>
<div class="wrap">
    <ul class="card-list clearfix">
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/1.png">
            </div>
        </li>
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/2.png">
            </div>
        </li>
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/3.png">
            </div>
        </li>
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/4.png">
            </div>
        </li>
        <li class="card">
            <div class="card-face">
                <img src="cards/bg.png">
            </div>
            <div class="card-back">
                <img src="cards/5.png">
            </div>
        </li>
    </ul>
</div>
</body>

/*
-webkit-  兼容 Safari and Chrome
-moz-     兼容 Firefox 4
-o-		  兼容 Opera
-ms- 	  兼容 IE9
*/

body {margin: 0;}
ul, li {margin: 0;padding: 0;list-style: none;}
.clearfix {*zoom: 1;}										/*清除浮动*/
.clearfix:after {display: table;content: '';clear: both;}  /*兼容其他浏览器*/

.card-list .card {
    float: left;
    position: relative;
    margin-left: 20px;
    margin-top: 20px;
    width: 270px;
    height: 376px;
    -webkit-perspective: 600px;			/*兼容 Safari and Chrome */
    -moz-perspective: 600px;			/*兼容 Firefox 4 */
    -ms-perspective: 600px;
    perspective: 600px;
}

.card-list .card-face,
.card-list .card-back {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;  /*规定以慢速开始和结束的过渡效果*/
    -webkit-transform-style: perspective-3d;
    -moz-transform-style: perspective-3d;
    -ms-transform-style: perspective-3d;
    transform-style: perspective-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;    /*如果在旋转元素不希望看到其背面时，该属性很有用。*/
}

.card-list .card-face {
    z-index: 2;				/*这个属性控制牌的背面在最上层*/
}

.card-list .card-back {
    z-index: 1;
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card-list .card:hover .card-face {
    z-index: 1;				/*当鼠标在上面，-1，变为底下*/
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.card-list .card:hover .card-back {
    z-index: 2;
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
}