使用CSS3实现酷炫的3D翻转效果，上代码：
<!doctype html> <html> <head> <!--声明当前页面编码集(中文编码<gbk,gb2312>,国际编码<utf-8>)--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="keywords" content="关键词,关键词"> <meta name="description" content=""> <title> html </title> <style type="text/css"> *{padding:0px;margin:0px;} #box{width:970px;margin:50px auto;} /*container start*/ .container{float:left;width:300px;height:400px;margin:10px 0 0 10px;/*设置3d环境*/transform-style:preserve-3d;perspective:500px;} .container .font{z-index:1;position:absolute;transition:all 1s linear;} .container:hover .back{z-index:2;} .container .back{transform: rotateY(180deg);position:absolute;left:0;top:0;padding:20px;width:260px;height:360px;z-index:0;transition:all 1s linear;background:linear-gradient(#9C3535,#333379);box-shadow: 5px 5px 4em #523E3E inset;color:#e5e5e5;font-size:16px;font-family:"楷体";} .container .item{transition:all 1s linear;} .container:hover .item{transform: rotateY(180deg);transition:all 1s linear;} /*container end*/ </style> </head> <body> <div id="box"> <!--container start--> <div class="container"> <div class="item"> <div class="font"> <img src="image/1.jpg" width="300" height="400"/> </div> <div class="back"> 亲爱滴同学们，我爱你们 </div> </div> </div> <!--container end--> </div> </body> </html>
原文：http://www.cnblogs.com/wanglitao/p/5685485.html