css3 实现3d盒子模型 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        width: 300px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #div{
        width: 100px;
        height: 100px;
        position: relative;
        animation:ams 5s infinite;
        transform-origin: center center -50px;
        -webkit-transform-origin: center center -50px;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        font-size: 20px;
        color: black;
        transform:rotateX(45deg) rotateZ(45deg);
        -webkit-transform:rotateX(45deg) rotateZ(45deg);
    }
    #div span{
        width: 100px;
        height: 100px;
        transform-origin: center center -50px;
        -webkit-transform-origin: center center -50px;
        perspective: 80px;
        -webkit-perspective: 80px;
        display: inline-block;
        position: absolute;
        text-align: center;
        line-height: 100px;
        opacity: 0;
    }
    #div span:nth-of-type(1){
        background: red;
        opacity: .7;
    }
    #div span:nth-of-type(2){
        background: salmon;
        transform: rotateY(-90deg);
        -webkit-transform: rotateY(-90deg);
        opacity: .7;
    }
    #div span:nth-of-type(3){
        background: pink;
        transform: rotateY(-180deg);
        -webkit-transform: rotateY(-180deg);
        opacity: .7;
    }
    #div span:nth-of-type(4){
        background: yellow;
        transform: rotateY(90deg);
        -webkit-transform: rotateY(90deg);
        opacity: .7;
    }
    #div span:nth-of-type(5){
        background: sienna;
        transform: rotateX(90deg);
        -webkit-transform: rotateX(90deg);
        opacity: .7;
    }
    #div span:nth-of-type(6){
        background: green;
        transform: rotateX(-90deg);
        -webkit-transform: rotateX(-90deg);
        opacity: .7;
    }

    @keyframes ams{
        0%{
            transform:rotateX(45deg) rotateY(0deg) rotateZ(45deg);
        }
        100%{
            transform:rotateX(45deg) rotateY(360deg) rotateZ(45deg);
        }
    }
</style>
<body>
    <div id="box">
        <div id="div">
            <span>前</span>
            <span>右</span>
            <span>后</span>
            <span>左</span>
            <span>上</span>
            <span>下</span>
        </div>
    </div>
</body>
</html>

 效果图：

 

posted @ 2020-04-07 17:27  龙卷风吹毁停车场  阅读(483)  评论(1)    收藏  举报