正方体空间旋转

最新推荐文章于 2021-04-16 18:25:41 发布

weixin_30827565

最新推荐文章于 2021-04-16 18:25:41 发布

阅读量257

点赞数

原文链接：http://www.cnblogs.com/llz1314/p/5741064.html

版权

所用的图片：等等······，可以自己添加图片

代码：<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>六边形</title>
   <style type="text/css">
   body{
       background: black;
   }
   .box{
       width: 400px;height: 400px;
       position: relative;
       left: 300px;top: 50px;
       transform-style: preserve-3d;
       transform: rotateX(45deg) rotateY(-45deg);
       transform-origin:bottom left;
       animation: move 6s linear infinite;
       float: left;
       margin-right: 300px;
       margin-top: 300px;
   }
   @keyframes move {
       0%{transform: rotateX(45deg) rotateY(-45deg) rotateZ(0deg);}
       100%{transform: rotateX(405deg) rotateY(315deg) rotateZ(360deg);}
   }
   .box div{
       width: 400px;height: 400px;
       font-size: 160px;
       text-align: center;
       line-height: 400px;
       color: #fff;
       position: absolute;
       left: 0;top: 0;
       border-radius: 100px;
       opacity: 0.9;
       box-shadow: 0px 0px 165px green;
       overflow: hidden;
   }
   .box div img{
       width: 400px;height: 400px;

   }
   .div1{
       background: green;
       transform:translateZ(200px);

   }
   .div2{
       background: red;
       transform:rotateX(-90deg) translateZ(200px);

   }
   .div3{
       background: blue;
       transform:rotateY(90deg) translateZ(200px);
   }
   .div4{
       background: orange;
       transform:rotateY(-90deg) translateZ(200px);
   }
   .div5{
       background: yellow;
       transform:rotateX(90deg) translateZ(200px);
   }
   .div6{
       background: pink;
       transform:translateZ(-200px);
   }
   </style>
</head>
<body>
   <div class="box">
       <div class="div1"><img src="4.jpg"></div>
       <div class="div2"><img src="5.jpeg"></div>
       <div class="div3"><img src="6.jpg"></div>
       <div class="div4"><img src="10.jpeg"></div>
       <div class="div5"><img src="8.jpg"></div>
       <div class="div6"><img src="9.jpg"></div>
   </div>
   <div class="box">
       <div class="div1"><img src="4.jpg"></div>
       <div class="div2"><img src="5.jpeg"></div>
       <div class="div3"><img src="6.jpg"></div>
       <div class="div4"><img src="10.jpeg"></div>
       <div class="div5"><img src="8.jpg"></div>
       <div class="div6"><img src="9.jpg"></div>
   </div>
   <div class="box">
       <div class="div1"><img src="4.jpg"></div>
       <div class="div2"><img src="5.jpeg"></div>
       <div class="div3"><img src="6.jpg"></div>
       <div class="div4"><img src="10.jpeg"></div>
       <div class="div5"><img src="8.jpg"></div>
       <div class="div6"><img src="9.jpg"></div>
   </div>
   <div class="box">
       <div class="div1"><img src="4.jpg"></div>
       <div class="div2"><img src="5.jpeg"></div>
       <div class="div3"><img src="6.jpg"></div>
       <div class="div4"><img src="10.jpeg"></div>
       <div class="div5"><img src="8.jpg"></div>
       <div class="div6"><img src="9.jpg"></div>
   </div>
</body>
</html>

转载于:https://www.cnblogs.com/llz1314/p/5741064.html

weixin_30827565

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正方体空间旋转

所用的图片：等等······，可以自己添加图片代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>六边形</title> <style type="text/css">...
复制链接

扫一扫