<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
perspective: 2000px;
background: black;
}
.wrap{
transform-style: preserve-3d;
width: 300px;height: 300px;
margin: 180px auto;
position: relative;
animation: move 8s infinite ;
}
.wrap div{
width: 300px;height: 300px;
position: absolute;
opacity: 0.8;
}
.wrap div:nth-child(1){
transform: translateZ(-150px);
}
.wrap div:nth-child(2){
transform: translateZ(150px);
}
.wrap div:nth-child(3){
transform: rotateX(90deg) translateZ(150px);
}
.wrap div:nth-child(4){
transform: rotateX(90deg) translateZ(-150px);
}
.wrap div:nth-child(5){
transform: rotateY(90deg) translateZ(150px);
}
.wrap div:nth-child(6){
transform: rotateY(90deg) translateZ(-150px);
}
/*.wrap:hover{
transform: rotateY(360deg) rotateX(360deg);
}*/
@keyframes move{
0%{transform: rotateY(0) rotateX(0);}
50%{transform: rotateY(360deg) rotateX(360deg);}
}
div img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1"><img src="image/1.jpg"/></div>
<div class="div2"><img src="image/2.jpg"/></div>
<div class="div3"><img src="image/3.jpg"/></div>
<div class="div4"><img src="image/4.jpg"/></div>
<div class="div5"><img src="image/5.jpg"/></div>
<div class="div6"><img src="image/6.jpg"/></div>
</div>
</body>
</html>