.box ul,ol{list-style:none}.rotatebox{margin:300px auto;padding:0;width:200px;height:200px;background-size:cover;background-repeat:no-repeat;transform-style:preserve-3d;transform:rotateX(15deg);animation:15s linear infinite move}.minrotatebox{width:100px;height:100px;position:absolute;left:50px;top:30px;transform-style:preserve-3d}.minrotatebox li{width:100px;height:100px;position:absolute;left:0;top:0}.minrotatebox li:first-child{background:url(./img/0.gif) no-repeat;transform:translateZ(50px)}.minrotatebox li:nth-child(2){background:url(./img/0.gif) no-repeat;transform:rotateX(180deg) translateZ(50px)}.minrotatebox li:nth-child(3){background:url(./img/0.gif) no-repeat;transform:rotateX(-90deg) translateZ(50px)}.minrotatebox li:nth-child(4){background:url(./img/0.gif) no-repeat;transform:rotateX(90deg) translateZ(50px)}.minrotatebox li:nth-child(5){background:url(./img/0.gif) no-repeat;transform:rotateY(-90deg) translateZ(50px)}.minrotatebox li:nth-child(6){background:url(./img/0.gif) no-repeat;transform:rotateY(90deg) translateZ(50px)}.maxrotatebox{width:800px;height:400px;position:absolute;left:0;top:-20px;transform-style:preserve-3d}.maxrotatebox li{width:200px;height:200px;background:#fff;position:absolute;left:0;top:0;opacity:.8;transition:1s}.maxrotatebox li:first-child{background:url(./img/1.png) no-repeat;transform:translateZ(100px)}.maxrotatebox li:nth-child(2){background:url(./img/2.png) no-repeat;transform:rotateX(180deg) translateZ(100px)}.maxrotatebox li:nth-child(3){background:url(./img/3.png) no-repeat;transform:rotateX(-90deg) translateZ(100px)}.maxrotatebox li:nth-child(4){background:url(./img/4.png) no-repeat;transform:rotateX(90deg) translateZ(100px)}.maxrotatebox li:nth-child(5){background:url(./img/5.png) no-repeat;transform:rotateY(-90deg) translateZ(100px)}.maxrotatebox li:nth-child(6){background:url(./img/6.png) no-repeat;transform:rotateY(90deg) translateZ(100px)}.rotatebox:hover ol li:first-child{transform:translateZ(300px);width:400px;height:400px;opacity:.8;left:-100px;top:-100px}.rotatebox:hover ol li:nth-child(2){transform:rotateY(60deg) translateZ(300px);width:400px;height:400px;opacity:.8;left:-100px;top:-100px}.rotatebox:hover ol li:nth-child(3){transform:rotateY(120deg) translateZ(300px);width:400px;height:400px;opacity:.8;left:-100px;top:-100px}.rotatebox:hover ol li:nth-child(4){transform:rotateY(180deg) translateZ(300px);width:400px;height:400px;opacity:.8;left:-100px;top:-100px}.rotatebox:hover ol li:nth-child(5){transform:rotateY(240deg) translateZ(300px);width:400px;height:400px;opacity:.8;left:-100px;top:-100px}.rotatebox:hover ol li:nth-child(6){transform:rotateY(300deg) translateZ(300px);width:400px;height:400px;opacity:.8;left:-100px;top:-100px}@keyframes move{0%{transform:rotateX(13deg) rotateY(0)}100%{transform:rotateX(13deg) rotateY(360deg)}}