<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D</title> <style> ul,li{ margin:0px;padding: 0px;list-style: none; } .out{ width: 150px; height: 150px; padding: 150px; border: 1px solid red; margin:0 auto; -webkit-perspective:500px; } .box{ width: 150px; height: 150px; border: 1px solid blue; position: relative; -webkit-transform-style:preserve-3d; -webkit-transform-origin:50% 50% 75px; /*-webkit-backface-visibility:hidden;*/ /*-webkit-transform:rotateX(20deg);*/ } .box li{ width: 150px;height: 150px; position: absolute; line-height: 150px; text-align: center; font-size: 20px; } .box li:nth-of-type(1){ background: red; top:-150px; left: 0px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(-90deg); } .box li:nth-of-type(2){ background: pink; top:0; left: -150px; -webkit-transform-origin:right; -webkit-transform:rotateY(90deg); } .box li:nth-of-type(3){ background: green; top:0; left: 0px; } .box li:nth-of-type(4){ background: yellow; top:0px; left: 150px; -webkit-transform-origin:left; -webkit-transform:rotateY(-90deg); } .box li:nth-of-type(5){ background: blue; top:150px; left: 0px; -webkit-transform-origin:top; -webkit-transform:rotateX(90deg); } .box li:nth-of-type(6){ background: orange; top:0px; left: 0px; -webkit-transform:translateZ(150px); } </style> <script> function setCss3 (obj,attrObj) { for (var i in attrObj) { var newi=i; if(newi.indexOf("-")>0){ var num=newi.indexOf("-"); newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase()); } obj.style[newi]=attrObj[i]; newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase()); obj.style["webkit"+newi]=attrObj[i]; obj.style["moz"+newi]=attrObj[i]; obj.style["o"+newi]=attrObj[i]; obj.style["ms"+newi]=attrObj[i]; } } window.onload = function(){ var box = document.getElementsByTagName('ul')[0]; var angle = 0; setInterval(function(){ angle+=5; setCss3(box,{transform:'rotateX('+angle+'deg)'}); },60); } </script> </head> <body> <div class="out"> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>