1+X证书学习日志——css 3D效果+立方体效果的实现

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

3D在2D的基础上，多了这些内容

            位移  transform:translateZ();
            旋转  transform:rotateZ()
            缩放内容涉及过多，暂不讨论

立方体的效果实现

 <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