<!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>