body { background:#cef; } #all { margin:250px auto; -webkit-perspective:2500px; } #imgs div { position:absolute; left:300px; width:235px; height:235px; } #imgs img { width:235px; height:235px; border-radius:15px; opacity:0.6; } #imgs { -webkit-transform-style:preserve-3d; animation:imgs 6s linear infinite; } #h { transform:rotatey(0deg) translatez(200px); } #qy { transform:rotatey(60deg) translatez(200px); } #qz { transform:rotatey(120deg) translatez(200px); } #hy { transform:rotatey(180deg) translatez(200px); } #hz { transform:rotatey(240deg) translatez(200px); } #q { transform:rotatey(300deg) translatez(200px); } @keyframes imgs { 0% { transform:rotatey(0deg) rotatex(30deg) } 50% { transform:rotatey(180deg) rotatex(-30deg) } 100% { transform:rotatey(360deg)rotatex(30deg) } }#imgs:hover { -webkit-animation-play-state:paused; } #h img:hover,#qy img:hover,#hy img:hover,#qz img:hover,#hz img:hover,#q img:hover { transform:scale(1.5); } #h img,#qy img,#hy img,#qz img,#hz img,#q img { transition:all 0.3s linear; }