唯美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空间梦幻发光物体。
浙公网安备 33010602011771号