一、魔方由3面，每面9个，一共27个立方体组成，所以要完成魔方的制作，先拆分成单个立方体的制作
先上代码index.html
<!DOCTYPE html> <html> <head> <title>CSS魔方</title> <meta name="author" content="ChenLiang"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/cube.css"> </head> <body> <div class="stage"> <div class="cube"> <div class="front style"></div> <div class="back style"></div> <div class="left style"></div> <div class="right style"></div> <div class="top style"></div> <div class="bottom style"></div> </div> </div> </body> </html>
1、一个立方体有6个面，分为前后左右上下（fron、back、left、right、top、bottom），定义6个div
2、为了使立方体有3D效果，要使用到transform-style和perspective
.stage{ position: absolute; width: 100%; height: 100%; -webkit-perspective: 2500px; background: #333; } .cube{ width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(45deg) rotateY(-45deg); }
perspective 属性定义 3D 元素距视图的距离，以像素计；（可以实际修改像素值看看变化）
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素，及被它包含的子元素具有3D效果
3、绘制6个面，需要在3D空间总分别移动各个面到相应的位置，要使用到translateX、translateY、translateZ、rotateX、rotateY、rotateZ
translateX:沿X轴向左（右）移动距离
rotate:绕X轴旋转度数
移动、旋转围绕的点和边默认为div的中心点，可以使用transform-origin改变
①transform-origin:center center (默认，第一个参数为X轴，第一个参数为Y轴，第三个参数z轴这里不考虑)
此时rotateY(45deg)即绕着b旋转45度
②transform-origin:left (未修改的默认为center)
此时rotateY(45deg)即绕着b旋转45度
4、cube.css
*{ margin: 0; padding: 0 } .stage{ position: absolute; width: 100%; height: 100%; -webkit-perspective: 2500px; background: #333; } .cube{ /*background: #333;*/ width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin-top: -150px; margin-left: -150px; -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(45deg) rotateY(-45deg); } .style{ position: absolute; width: 300px; height: 300px; border: 2px solid #333; } /*前面 沿着Z轴前移150px*/ .cube .front{ background: #FFFF00; transform: translateZ(150px); -ms-transform: translateZ(150px); -webkit-transform: translateZ(150px); } /*后面 沿着Z轴后移150px*/ .cube .back{ background: #009f41; transform: translateZ(-150px) rotateY(180deg); -ms-transform: translateZ(-150px) rotateY(180deg); -webkit-transform: translateZ(-150px) rotateY(180deg); } /*左面 沿着Y轴旋转270度，然后沿着X轴左移一半*/ .cube .left{ background: #d50010; transform: rotateY(270deg) translateX(-50%); -ms-transform: rotateY(270deg) translateX(-50%); -webkit-transform: rotateY(270deg) translateX(-50%); transform-origin: left; } /*右面 沿着Y轴旋转-270度，然后沿着X轴右移一半*/ .cube .right{ background: #fe8a0a; transform: rotateY(-270deg) translateX(50%); -ms-transform: rotateY(-270deg) translateX(50%); -webkit-transform: rotateY(-270deg) translateX(50%); transform-origin: right; } /*上面 沿着X轴旋转-270度，然后沿着Y轴上移一半*/ .cube .top{ background: #00469f; transform: rotateX(-270deg) translateY(-50%); -ms-transform: rotateX(-270deg) translateY(-50%); -webkit-transform: rotateX(-270deg) translateY(-50%); transform-origin: top; } /*下面 沿着X轴旋转270度，然后沿着Y轴下移一半*/ .cube .bottom{ background: #fff; transform: rotateX(270deg) translateY(50%); -ms-transform: rotateX(270deg) translateY(50%); -webkit-transform: rotateX(270deg) translateY(50%); transform-origin: bottom; }
