旋转魔方(1)-外壳

实现结果如图：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>魔方</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <div class="box-page top"></div>
            <div class="box-page bottom"></div>
            <div class="box-page left"></div>
            <div class="box-page right"></div>
            <div class="box-page after"></div>
            <div class="box-page before"></div>
        </div>
    </div>
</body>
</html>

CSS：

*{
    padding: 0px;
    margin: 0px;
}

body{
color:#ccc;
}

.container{
     300px;
    height: 300px;
    margin: 150px auto;
}

/*整体*/
.box{
     300px;
    height: 300px;
    /*子元素保留其3D位置*/
    transform-style:preserve-3d;
    transform:rotateX(-60deg) rotateZ(40deg);
}

/*全部页*/
.box_page{
     300px;
    height: 300px;
    background-color: red;
    position: absolute;
}

/*各页*/
.top{
    background-color: red;
    transform: translateY(-150px) rotateX(90deg);
}
.bottom{
    background-color: yellow;
    transform: translateY(150px) rotateX(90deg);

}
.left{
    background-color: blue;
    transform: translateX(-150px) rotateY(90deg);
}
.right{
    background-color: pink;
    transform: translateX(150px) rotateY(90deg);
}
.after{
    background-color: black;
    transform: translateZ(-150px);
}
.before{
    background-color: green;
    transform: translateZ(150px);
}

旋转魔方(1)-外壳

实现结果如图：

translate方向：x正为水平向右，y正垂直向下，z正向电脑前的你

rotate方向：x水平向右朝上旋转，y垂直向上朝右旋转，z正看着的屏幕顺时针

旋转魔方(1)-外壳

实现结果如图：

translate方向：x正为水平向右，y正垂直向下，z正向电脑前的你

rotate方向：x水平向右 朝上旋转，y垂直向上 朝右旋转，z正看着的屏幕顺时针

rotate方向：x水平向右朝上旋转，y垂直向上朝右旋转，z正看着的屏幕顺时针