css3魔方(一)---立方体

一、魔方由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;
}