<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin:0; padding:0; } ul,li{ list-style: none; } .wrap{ width:200px; height:200px; border:1px solid blue; margin:150px auto; perspective:500px; } .box{ width:150px; height:150px; position:relative; transform-origin:center center 75px; transform-style:preserve-3d; transition:1s; } .box li{ width:150px; height:150px; position: absolute; text-align: center; line-height:150px; } .box li:nth-of-type(1){ background:blue; left:-150px; transform-origin:right; transform:rotateY(90deg); } .box li:nth-of-type(2){ background:red; left:150px; transform-origin:left; transform:rotateY(-90deg); } .box li:nth-of-type(3){ background:gray; top:150px; transform-origin:top; transform:rotateX(90deg); } .box li:nth-of-type(4){ background:pink; top:-150px; transform-origin:bottom; transform:rotateX(-90deg); } .box li:nth-of-type(5){ background:purple; transform:translateZ(150px); } .box li:nth-of-type(6){ background:green; z-index:-1; } </style> <body> <div class="wrap"> <ul class="box"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html> <script> var num = 0; var oBox = document.querySelector('.box'); setInterval(function(){ num--; oBox.style.transform='rotateY('+num*90+'deg)'; },3000); </script>