cube by div+css

思想：先生成6个正方形，然后把这6个正方形按照前后左右上下的顺序偏转自身长度的一半，然后现再CSS代码把这6个正方形设置一个整体，即立方体。然后把立方体旋转一定的角度，再设置一下透明度（能从前面看到后面），从视觉上看就更逼真了。

front

back

top

bottom

left

right

    <style>
        .cube {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            /* perspective: 1000px; */
            transform: rotateX(30deg) rotateY(30deg);
            transform-style: preserve-3d;

        }
        .front, .back, .top, .bottom, .left, .right {
            width: 200px;
            height: 200px;
            font-family: "Microsoft YaHei";
            line-height: 200px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.5;
        }
        .front {
            background-color: #008000;
            transform: translateZ(100px);
        }
        .back {
            background-color: #ffff00;
            transform: translateZ(-100px);
        }
        .top {
            background-color: #ff0000;
            transform: rotateX(90deg) translateZ(100px);
        }
        .bottom {
            background-color: #ffa500;
            transform: rotateX(90deg) translateZ(-100px);
        }
        .left {
            background-color: #0000ff;
            transform: rotateY(90deg) translateZ(-100px);
        }
        .right {
            background-color: #ffc0cb;
            transform: rotateY(90deg) translateZ(100px);
        }
    </style>
    <div class="cube">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>