<!DOCTYPE html> <html> <head> <title>cssBox</title> <style type="text/css"> *{ padding: 0; margin: 0; } #stage{ /*舞台元素,该元素作为舞台,不用进行3d操作,舞台内部的元素需设置为3d元素,包括容器和容器内的元素*/ position: relative; height: 800px; background-color: #D4D4D4; perspective: 3500px; /*使得舞台子元素变为透视元素, 即遵循近大远小,参考WebGL的透视相机*/ perspective-origin: 0 0; /*设置相机相对舞台的位置, 这里设置未左上角,个人理解是相机发射垂直射线到stage形成的点在左上角*/ } #container{ width: 500px; height: 500px; position: absolute; /*使得容器居中放置*/ margin-left: calc(50% - 250px); margin-top: 150px; transition: all ease-in-out 1s; /*这步操作很关键,给容器加入3d效果,这时候容器内部的元素(即容器子元素),形成3d关系,若无此操作,经过3d变换,空间是乱的*/ transform-style: preserve-3d; /*设置容器进行3d变换的中心点,即WebGL里的物体中心点,所有变换的会围绕改点进行,尤其是旋转最为明显,这里设置的点的位置刚好在正方体的最中心*/ transform-origin: center center 250px; } .page{ box-shadow: 5px 5px 10px #A9A9A9;/*设置盒子阴影*/ /*该操作这里可要可不要,默认值就是visible,若设置为hidden,则一个元素转到背面的时候会变为透明,否则背面跟前面一样。这里是看不到背面的,所有不用进行设置*/ backface-visibility: visible; position: absolute; width: 500px; height: 500px; } </style> </head> <body> <div id="stage"> <div id="container"> <div id="page1" class="page" style="background-color: #D15FEE; transform: translateZ(500px);"></div> <div id="page2" class="page" style="background-color: #CDCD00; transform-origin: left center; transform: rotateY(-90deg);"></div> <div id="page3" class="page" style="background-color: #C0FF3E; transform-origin: right center; transform: rotateY(90deg);"></div> <div id="page4" class="page" style="background-color: #ADD8E6; transform-origin: center top; transform: rotateX(90deg);"></div> <div id="page5" class="page" style="background-color: #8B4513; transform-origin: center bottom; transform: rotateX(-90deg);" ></div> <div id="page6" class="page" style="background-color: #303030; transform: rotateY(180deg)"></div> </div> </div> <script type="text/javascript"> var container = document.getElementById("container"); var angle = 0; container.addEventListener("click", function(){ angle += 90; container.style.transform = "rotateY(" + angle + "deg)"; }, false); </script> </body> </html>
另一种实现方式:通过先旋转再逐个平移来实现正方体,这样不用变换中心店transform-origin:
<!DOCTYPE html> <html> <head> <title>cssBox</title> <style type="text/css"> *{ padding: 0; margin: 0; } #stage{ /*舞台元素,该元素作为舞台,不用进行3d操作,舞台内部的元素需设置为3d元素,包括容器和容器内的元素*/ position: relative; height: 800px; background-color: #D4D4D4; perspective: 3500px; /*使得舞台子元素变为透视元素, 即遵循近大远小,参考WebGL的透视相机*/ perspective-origin: 0 0; /*设置相机相对舞台的位置, 这里设置未左上角,个人理解是相机发射垂直射线到stage形成的点在左上角*/ } #container{ width: 500px; height: 500px; position: absolute; /*使得容器居中放置*/ margin-left: calc(50% - 250px); margin-top: 150px; transition: all ease-in-out 1s; /*这步操作很关键,给容器加入3d效果,这时候容器内部的元素(即容器子元素),形成3d关系,若无此操作,经过3d变换,空间是乱的*/ transform-style: preserve-3d; } .page{ box-shadow: 5px 5px 10px #A9A9A9;/*设置盒子阴影*/ /*该操作这里可要可不要,默认值就是visible,若设置为hidden,则一个元素转到背面的时候会变为透明,否则背面跟前面一样。这里是看不到背面的,所有不用进行设置*/ backface-visibility: visible; position: absolute; width: 500px; height: 500px; } </style> </head> <body> <div id="stage"> <div id="container"> <!--这里translateZ不像WebGL里的z坐标,WebGL的z坐标是永恒不变的,变的只有物体场景,这里translateZ所指的方向是相对物体当前状态而定,永远相对物体的正前方(正前方指面朝的方向,初始朝着人眼)--> <div id="page1" class="page" style="background-color: #D15FEE; transform: rotateY(0deg) translateZ(250px);"></div> <div id="page2" class="page" style="background-color: #CDCD00; transform: rotateY(90deg) translateZ(250px);"></div> <div id="page3" class="page" style="background-color: #C0FF3E; transform: rotateY(180deg) translateZ(250px);"></div> <div id="page4" class="page" style="background-color: #ADD8E6; transform: rotateY(270deg) translateZ(250px);"></div> <div id="page5" class="page" style="background-color: #8B4513; transform: rotateX(-90deg) translateZ(250px)" ></div> <div id="page6" class="page" style="background-color: #303030; transform: rotateX(90deg) translateZ(250px)"></div> </div> </div> <script type="text/javascript"> var container = document.getElementById("container"); var angle = 0; container.addEventListener("click", function(){ angle += 90; container.style.transform = "rotateY(" + angle + "deg)"; }, false); </script> </body> </html>