标签：
所用的图片：
等等······，可以自己添加图片
代码：<!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>
标签：
原文地址：http://www.cnblogs.com/llz1314/p/5741064.html
