唯美3d空间旋转物体，

最新推荐文章于 2019-04-12 21:44:00 发布

weixin_30538029

最新推荐文章于 2019-04-12 21:44:00 发布

阅读量74

点赞数 1

原文链接：http://www.cnblogs.com/fiear/p/8485827.html

版权

<!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空间梦幻发光物体。

转载于:https://www.cnblogs.com/fiear/p/8485827.html

weixin_30538029

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
唯美3d空间旋转物体，

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">body{height:100%;perspectiv...
复制链接

扫一扫