一、魔方由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;
}
时间： 2024-11-06 16:31:41