上代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3DX轴旋转测试</title> <style> .container{ perspective: 50000px; transform-style:preserve-3d; display:inline-block; width: 20%; } .box{ width:80%; height: 80px; box-shadow:5px 5px 15px #666666; line-height:80px; } .box{ backface-visibility: hidden; transition: 2s; transform-style: preserve-3d; position: absolute; text-align: center; box-shadow:2px 2px 2px #999999; } .box1{background-color: pink;} .box2{background-color: red;} .box2{transform: rotateX(-180deg);} span{ font-size: 20px; line-height: 80px; } .vback1{transform: rotateX(180deg);} .vback2{transform: rotateX(0deg);} .vfront1{transform: rotateX(0deg);} .vfront2{transform: rotateX(-180deg);} </style> </head> <body> <button id="btnBack">查看后面</button> <button id="btnFront">返回前面</button> <div class="container"> <div class="box box1"> <span>张三</span> </div> <div class="box box2"> <span>张三</span> </div> </div> <div class="container"> <div class="f box box1"> <span> 演唱:18.98</span> </div> <div class="b box box2"> <span>演唱:20.98</span> </div> </div> <div class="container"> <div class="f box box1"> <span>知识问答:13</span> </div> <div class="b box box2"> <span>知识问答:13.56</span> </div> </div> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btnBack").click(function(){ $(".f").removeClass("vfront1"); $(".b").removeClass("vfront2"); $(".f").addClass("vback1"); $(".b").addClass("vback2"); }); $("#btnFront").click(function(){ $(".f").removeClass("vback1"); $(".b").removeClass("vback2"); $(".f").addClass("vfront1"); $(".b").addClass("vfront2"); }); }); </script> </body> </html>
