body { background:#06081B; perspective:5000px; } .show { perspective:5000px; -webkit-transform:rotateX(-45deg); -moz-transform:rotateX(-45deg); transform:rotateX(-45deg); transform-style:preserve-3d; } .box { position:relative; width:150px; height:250px; border:1px solid red; margin:300px auto; transform-style:preserve-3d; -webkit-animation:rotate1 10s linear infinite; -moz-animation:rotate1 10s linear infinite; animation:rotate1 10s linear infinite; } .box img { width:150px; height:250px; border:1px solid #ccc; position:absolute; left:0; top:0; -webkit-box-reflect:below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5)); } .img1 { -webkit-transform:translateZ(300px); -moz-transform:translateZ(300px); transform:translateZ(300px); } .img2 { -webkit-transform:rotateY(36deg) translateZ(300px); -moz-transform:rotateY(36deg) translateZ(300px); transform:rotateY(36deg) translateZ(300px); } .img3 { -webkit-transform:rotateY(72deg) translateZ(300px); -moz-transform:rotateY(72deg)g) translateZ(300px); transform:rotateY(72deg) (300px); } .img4 { -webkit-transform:rotateY(108deg) translateZ(300px); -moz-transform:rotateY(108deg) translateZ(300px); transform:rotateY(108deg) translateZ(300px); } .img5 { -webkit-transform:rotateY(144deg) translateZ(300px); -moz-transform:rotateY(144deg) translateZ(300px); transform:rotateY(144deg) translateZ(300px); } .img6 { -webkit-transform:rotateY(180deg) translateZ(300px); -moz-transform:rotateY(180deg) translateZ(300px); transform:rotateY(180deg) translateZ(300px); } .img7 { -webkit-transform:rotateY(216deg) translateZ(300px); -moz-transform:rotateY(216deg) translateZ(300px); transform:rotateY(216deg) translateZ(300px); } .img8 { -webkit-transform:rotateY(252deg) translateZ(300px); -moz-transform:rotateY(252deg) translateZ(300px); transform:rotateY(252deg) translateZ(300px); } .img9 { -webkit-transform:rotateY(288deg) translateZ(300px); -moz-transform:rotateY(288deg) translateZ(300px); transform:rotateY(288deg) translateZ(300px); } .img10 { -webkit-transform:rotateY(324deg) translateZ(300px); -moz-transform:rotateY(324deg) translateZ(300px); transform:rotateY(324deg) translateZ(300px); } @-moz-keyframes rotate1 { 0% { -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); transform:rotateY(0deg); } 100% { -webkit-transform:rotateY(360deg); -moz-transform:rotateY(360deg); transform:rotateY(360deg); } }@-webkit-keyframes rotate1 { 0% { -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); transform:rotateY(0deg); } 100% { -webkit-transform:rotateY(360deg); -moz-transform:rotateY(360deg); transform:rotateY(360deg); } }