最近一直在学 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);
}
web 前端中文站点评：
CSS3的强大，相信大家都已经见识到了。在学习前端的过程中，了解最新前沿的技术是非常有必要的，所以大家赶紧研究研究吧，敲敲代码。
