* { margin:0; padding:0; list-style:none } .box { width:300px; height:300px; border:1px solid red; margin:100px auto; perspective:1200px; } ul { width:200px; height:200px; border:1px solid red; margin:50px 50px; position:relative; transform-style:preserve-3d; animation:move 60s infinite linear; transform-origin:center center 100px } li { width:200px; height:200px; background:darkcyan; position:absolute } li:nth-last-of-type(1) { background:border-box; } li:nth-last-of-type(2) { background:darkgoldenrod; transform:translateX(200px) rotateY(-90deg); transform-origin:left } li:nth-last-of-type(3) { background:red; transform:translateX(-200px) rotateY(90deg); transform-origin:right } li:nth-last-of-type(4) { background:orchid; transform:translateY(200px) rotateX(90deg); transform-origin:top } li:nth-last-of-type(5) { background:grey; transform:translateY(-200px) rotateX(-90deg); transform-origin:bottom } li:nth-last-of-type(6) { background:chartreuse; transform:translateZ(200px); opacity:0.7 } @keyframes move { from { transform:rotateY(0deg) } to { transform:rotateY(360deg) } }