唯美3d空间旋转物体， 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
body{height:100%;perspective:1500px;background: #000;overflow: hidden;}
.main{width:800px;height:800px;margin:0 auto;transform-style:preserve-3d;position: relative;transform:rotateX(0deg) rotateY(0deg);}
.box{width: 400px;height:400px;position: absolute;top:0;right:0;bottom: 0;left:0;margin:auto;transform-style:preserve-3d;}
.box1{transform:rotateY(90deg);}
.box2{transform:rotateX(90deg);}
.item1,.item2,.item3,.item4{position: absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
.item1{width:200px;height:200px;border-radius:50%;box-shadow: inset 0 0 50px red,inset 0 0 100px blue,inset 0 0 150px green;transform:translateZ(150px);}
.item2{width:200px;height:200px;border-radius: 50%;box-shadow: inset 0 0 50px red,inset 0 0 100px blue,inset 0 0 150px green;transform:translateZ(-150px); }
.item3{width:400px;height:400px;border-radius: 50%;box-shadow: inset 0 0 50px red,inset 0 0 100px blue,inset 0 0 150px green;transform:translateZ(300px); }
.item4{width:400px;height:400px;border-radius: 50%;box-shadow: inset 0 0 50px red,inset 0 0 100px blue,inset 0 0 150px green;transform:translateZ(-300px);}
.main{animation:auto 10s linear infinite;}

@keyframes auto{
    0%{
        transform:rotateX(0deg) rotateY(0deg) 
    }
    100%{
        transform:rotateX(360deg) rotateY(360deg) 
    }
}

    </style>
</head>
<body>
    <div class="main">
        <div class="box box1">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
            <div class="item4"></div>
        </div>
        <div class="box box2">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
            <div class="item4"></div>
        </div>
        <div class="box box3">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
            <div class="item4"></div>
        </div>
    </div>
</body>
</html>

3D空间梦幻发光物体。

posted on 2018-02-28 21:07  李业锋  阅读(152)  评论(0)  编辑  收藏  举报

导航