@keyframes xuanz { 0% { transform:rotateY(0deg) rotatex(15deg); } 100% { transform:rotateY(360deg) rotatex(15deg); } }.wt { perspective:800px; } .d1 { transform-style:preserve-3d; position:relative; width:200px; height:200px; margin:400px auto; animation:xuanz 10s infinite linear; } .d1 div { width:200px; height:200px; position:absolute; left:0; top:0; } .d1 div:nth-child(1) { transform:translatez(-100px); background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover; } .d1 div:nth-child(2) { transform:rotateY(90deg) translatez(-100px); background:url(https://www.jq22.com/img/cs/500x500-2.png) 0 -50PX /cover; } .d1 div:nth-child(3) { transform:rotateY(90deg) translatez(100px); background:url(https://www.jq22.com/img/cs/500x500-3.png) 0 -50PX /cover; } .d1 div:nth-child(4) { transform:rotatex(-90deg) translatez(100px); background:url(https://www.jq22.com/img/cs/500x500-4.png) 0 -50PX /cover; } .d1 div:nth-child(5) { transform:rotatex(-90deg) translatez(-100px); background:url(https://www.jq22.com/img/cs/500x500-6.png) 0 -50PX /cover; } .d1 div:nth-child(6) { transform:translatez(100px); background:url(https://www.jq22.com/img/cs/500x500-5.png) 0 -10PX /cover; } .d1 div:nth-child(7),div:nth-child(8),div:nth-child(9),div:nth-child(10),div:nth-child(11),div:nth-child(12) { width:300px; height:300px; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px; opacity:0.3; transition:transform 1s; } .d1 div:nth-child(7) { transform:translatez(-150px); background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover; } .d1 div:nth-child(8) { transform:rotateY(90deg) translatez(-150px); background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover; } .d1 div:nth-child(9) { transform:rotateY(90deg) translatez(150px); background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover; } .d1 div:nth-child(10) { transform:rotatex(-90deg) translatez(150px); background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover; } .d1 div:nth-child(11) { transform:rotatex(-90deg) translatez(-150px); background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover; } .d1 div:nth-child(12) { transform:translatez(150px); background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -10PX /cover; } body:hover div:nth-child(7) { transform:translatez(-300px) scale(1.2); opacity:0.8; } .wt:hover div:nth-child(8) { transform:rotateY(90deg) translatez(-300px) scale(1.2); opacity:0.8; } .wt:hover div:nth-child(9) { transform:rotateY(90deg) translatez(300px) scale(1.2); opacity:0.8; } .wt:hover div:nth-child(10) { transform:rotatex(-90deg) translatez(300px) scale(1.2); opacity:0.8; } .wt:hover div:nth-child(11) { transform:rotatex(-90deg) translatez(-300px) scale(1.2); opacity:0.8; } .wt:hover div:nth-child(12) { transform:translatez(300px) scale(1.2); opacity:0.8; }
更新时间:2021-06-11 01:35:22
代码自己写的,最简单的3d效果