1 + X certificate realize learning log --css 3D effect + cube effect

        形成一个3D的空间
            transform-style: preserve-3d;

### 3D based on 2D on the content of these multi-
displacement transform: translateZ ();
rotation transform: rotateZ ()
zoom covering too much, not be discussed

Cube effect to achieve

 <style>
    *{
        margin:0;
        padding:0;
    }
    section{
        width:300px;
        height:300px;
        position:fixed;
        background:purple;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;
        /*让父元素转动一个角度，方便观察*/
        transform:rotateX(20deg) rotateY(30deg);
        /*转成3d空间*/
        transform-style: preserve-3d;
    }
    section:hover{
        background: none;
    }

    div{
        width:300px;
        height:300px;
        position:absolute;
        left:0;top:0;
        font-size:100px;
        text-align: center;
        font-weight: bolder;
        line-height:300px;
        opacity:0.7;
        transition:1s
    }


    section:hover div:nth-child(1){
        transform:translateZ(300px);
        background:red;
    }

    section:hover div:nth-child(2){
        transform:translateZ(-300px) rotateY(180deg);
        background:orange;
    }

    section:hover div:nth-child(3){
        transform:translateX(300px) rotateY(90deg);
        background:green
    }

    section:hover div:nth-child(4){
        transform:translateX(-300px) rotateY(-90deg);
        background:yellow;
    }

    section:hover div:nth-child(5){
        transform:translateY(300px) rotateX(-90deg);
        background:pink
    }

    section:hover div:nth-child(6){
        transform:translateY(-300px) rotateX(90deg);
        background:blue;
    }
</style>

1

2

3

4

5

6