1つの+ X証明書リアライズ学習ログ--css 3Dエフェクト+キューブ効果

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

###これらのマルチのコンテンツに2Dに基づいて3次元
変位変換：translateZ（）;
回転変換：回転Z（）が
議論される、あまりにも多くをカバーしないズーム

達成するために、キューブの効果

 <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