使用css3写一个立体方块

近期在项目中做了一个立体翻页的效果，写一个小demo来记录一下
看一下最终的效果。丑的话求不要吐槽我，我知道我的美感有待提高(๑*◡*๑)
完整代码在最后面

效果预览

直接开干：
首先是页面结构

    
    
    
    



    

        front
        up
        down
        left
        right
        back
    

这里我用了一个div来当容器，代表这个方块的整体，在里面给了6个span分别对应着方块的6个面。
为了方便写样式，我给了各个面一个class：

• front代表前面
• back代表后面
• up是上面
• down是下面
• left是
  至此结构以及写的差不多，我们开始给这些结构加点样式

        .cube {
            display: block;
            position: relative;
            margin: 200px auto;
            width: 100px;
            height: 100px;
            transform-style: preserve-3d;
            transform: rotateX(-15deg) rotateY(45deg) rotateZ(0deg);
        }

        .cube-side {
            display: inline-block;
            width: 100px;
            height: 100px;
            position: absolute;
        }

        .cube-side.up {
            background: #f00;
            transform: rotateX(90deg) translateZ(50px);
        }

        .cube-side.down {
            background: #0f0;
            transform: rotateX(-90deg) translateZ(50px);
        }

        .cube-side.left {
            background: #00f;
            transform: rotateY(-90deg) translateZ(50px);
        }

        .cube-side.right {
            background: #f0f;
            transform: rotateY(90deg) translateZ(50px);
        }

        .cube-side.front {
            background: #0ff;
            transform: translateZ(50px);
        }

        .cube-side.back {
            background: #ff0;
            transform: translateZ(-50px) rotateY(180deg);
        }

效果就出来了

为了让方块动起来，需要js来控制方块的样式，我们先在结构中添加一下滑块开关。嗯，顺便写点样式居中下：

是 HTML5 中的新对象，在页面中展示的就是一个小滑块开关。在这里我们不考虑兼容，就直接拿来用啦。
其中的min属性代表元素的最小值，max属性代表元素的最大值。

最后上一点js代码用来监听滑块的拖动，然后修改对应的样式

        var controlX = document.querySelector('#controlX'),
            controlY = document.querySelector('#controlY'),
            controlZ = document.querySelector('#controlZ');

        var cubeX = 0,
            cubeY = 0,
            cubeZ = 0

        controlX.oninput = function (e) {
            cubeX = e.target.value;
            updateCube(cubeX, cubeY, cubeZ);
        }
        controlY.oninput = function (e) {
            cubeY = e.target.value;
            updateCube(cubeX, cubeY, cubeZ);
        }
        controlZ.oninput = function (e) {
            cubeZ = e.target.value;
            updateCube(cubeX, cubeY, cubeZ);
        }

        function updateCube(x, y, z) {
            var cube = document.querySelector('#cube');
            cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg) rotateZ(${z}deg)`
        }

嗯，基本到这里是写完了，如果想要好看一点的话可以往方块的面贴点图，使用img标签或者是background样式都可以，这里就不写了，最后贴一下完整代码：

    
    
    
    
    



    

        front
        up
        down
        left
        right
        back