<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #wrap{ -webkit-perspective:800; -webkit-perspective-origin:50% 50%; /*overflow: hidden;*/ margin-top: 60px; } #con{ -webkit-transform-style:preserve-3d; margin: 0 auto; position: relative; width: 300px; height: 300px; -webkit-transform-origin:150px 150px -150px; } .page{ background-color: #000000; color: white; width: 260px; height: 260px; padding: 20px; text-align: center; line-height: 300px; font-size: 50px; opacity: 0.5; } #page1{ position: absolute; -webkit-transform:rotateX(0deg); -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; } #page2{ position: absolute; -webkit-transform:rotateY(-90deg); -webkit-transform-origin:right; -webkit-transition:-webkit-transform 1s linear; } #page3{ position: absolute; -webkit-transform:translateZ(-300px); } #page4{ position: absolute; -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); } #page5{ position: absolute; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); } #page6{ position: absolute; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg); } /* #page2,#page3,#page4,#page5{ position: absolute; -webkit-transform:rotateX(90deg); -webkit-transform-origin:bottom; -webkit-transition:-webkit-transform 1s linear; }*/ #dd{ position: absolute; top: 400px; } </style> <script> window.onload = function(){ var index = 1; var con = document.getElementById("con"); setInterval(function(){ con.style.webkitTransform = "rotateY("+index+"deg) rotateX("+index+"deg) rotateZ("+index+"deg)"; index++; },30); } </script> </head> <body> <div id="wrap"> <div id="con"> <div id="page1" class="page">1</div> <div id="page2" class="page">2</div> <div id="page3" class="page">3</div> <div id="page4" class="page">4</div> <div id="page5" class="page">5</div> <div id="page6" class="page">6</div> </div> </div> <!--<div id="dd"><a href="javascript:next()">next</a> <a href="javascript:prev();">pre</a></div>--> </body> </html>