最終效果
代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>立方體</title> <style> *{margin: 0;padding: 0;} .stage{position: relative;margin: 300px 0 0 300px;perspective: 800px;width: 200px;height: 200px;} .container{width: 200px;height: 200px;position: absolute;transform-style:preserve-3d;transition: all 3s;} .face{width: 100%;height: 100%;position: absolute;left: 0;top: 0;text-align: center;line-height: 200px;font-size: 50px;color: #fff;border: 1px solid #ccc;opacity: 0.3;background: #999;} .f1{transform: rotateX(90deg) translateZ(100px);} .f2{transform: translateZ(-100px);} .f3{transform: rotateX(90deg) translateZ(-100px);} .f4{transform: translateZ(100px);} .f5{transform: rotateY(90deg) translateZ(100px);} .f6{transform: rotateY(90deg) translateZ(-100px);} </style> </head> <body> <button>旋轉</button> <div> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> </div> <script> var btn = document.getElementById('rot'); var cont = document.getElementById('cont'); btn.addEventListener('click',function(){ cont.style.transform = 'rotateY(180deg)'; },false); </script> </body> </html> 首先我們需要一個舞台stage,方便我們設置perspective(透視值)
然后我們還需要一個container做旋轉的容器，在container上面我們需要設置transfor-style，方便container下面的子元素轉換成3d元素。
接着我們就可以開始給face安排位置
貼一張坐標圖方便理解
坐標圖