CSS实现3D效果

2020-01-14

CSS

Word count: 425 | Reading time≈ 2 min

transform相关属性实现3D效果

<style>
    ._3Dbox{
        width: 200px;
        margin: 200px auto;
        perspective: 2000px;    /* 视距 */
    }
    ._3Dbox .cube{
        position: relative;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;   /* 以3d的形式展示 ！！！ */
        animation: _3dmove 10s linear infinite;
    }
    ._3Dbox .cube div{
        position: absolute;
        width: 200px;
        height: 200px;
        border: 2px solid lightblue;
        line-height: 200px;
        font-size: 30px;
        opacity: 0.9;
        text-align: center;
        background: url('/images/avatar.jpg');
        background-size: contain;
    }
    ._3Dbox .cube div:nth-child(1){ /* 上 */
        transform:rotateX(90deg) translateZ(102px);
    }
    ._3Dbox .cube div:nth-child(2){ /* 下 */
        transform:rotateX(-90deg) translateZ(102px);
    }
    ._3Dbox .cube div:nth-child(3){ /* 前 */
        transform:translateZ(102px);
    }
    ._3Dbox .cube div:nth-child(4){ /* 后 */
        transform: translateZ(-102px);
    }
    ._3Dbox .cube div:nth-child(5){ /* 左 */
        transform: translateX(-102px) rotateY(90deg);
    }
    ._3Dbox .cube div:nth-child(6){ /* 右 */
        transform: translateX(102px) rotateY(-90deg);
    }
    @keyframes _3dmove {
        to{
            transform: rotateX(360deg) rotateY(360deg) ;
        }
    }
</style>
<div class="_3Dbox">
    <div class="cube">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS中的3D坐标轴

rotateX/Y/Z() 相当于绕X/Y/Z轴旋转多少度
translateX/Y/Z() 相当于沿着X/Y/Z轴的方向移动多少像素