* { margin:0; padding:0; } img { display:block; } ul { list-style:none; } .box { width:1400px; height:700px; position:relative; margin:50px auto; perspective:1800px; } ul { transform-style:preserve-3d; transition:3s; } .box ul li { position:absolute; left:600px; top:300px; } .box ul li:nth-child(1) { transform:rotateY(40deg) translateZ(400px); } .box ul li:nth-child(2) { transform:rotateY(80deg) translateZ(400px); } .box ul li:nth-child(3) { transform:rotateY(120deg) translateZ(400px); } .box ul li:nth-child(4) { transform:rotateY(160deg) translateZ(400px); } .box ul li:nth-child(5) { transform:rotateY(200deg) translateZ(400px); } .box ul li:nth-child(6) { transform:rotateY(240deg) translateZ(400px); } .box ul li:nth-child(7) { transform:rotateY(280deg) translateZ(400px); } .box ul li:nth-child(8) { transform:rotateY(320deg) translateZ(400px); } .box ul li:nth-child(9) { transform:rotateY(360deg) translateZ(400px); } .box ul:hover { transform:rotateY(360deg); }
更新时间:2019-12-23 23:57:55
鼠标指着,图片旋转,旋转图片轮播