效果图如下：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>万花筒效果</title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 180px;height: 340px;margin: 100px auto;transform: rotateX(-10deg);transform-style: preserve-3d;animation: change 10s linear infinite;}.item {position: absolute;-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);}img {width: 180px;height: 300px;}@keyframes change {0% {transform: rotateX(-10deg) rotateY(0deg);}100% {transform: rotateX(-10deg) rotateY(360deg);}}.box:hover {cursor: pointer;animation-play-state: paused;}</style></head><body><div class="box"><div class="item"><img src="./imgs/1.jpg" alt=""></div><div class="item"><img src="./imgs/2.jpg" alt=""></div><div class="item"><img src="./imgs/3.jpg" alt=""></div><div class="item"><img src="./imgs/4.jpg" alt=""></div><div class="item"><img src="./imgs/5.jpg" alt=""></div><div class="item"><img src="./imgs/6.jpg" alt=""></div><div class="item"><img src="./imgs/7.jpg" alt=""></div><div class="item"><img src="./imgs/8.jpg" alt=""></div><div class="item"><img src="./imgs/9.jpg" alt=""></div><div class="item"><img src="./imgs/10.jpg" alt=""></div></div><script src="/ajax/libs/jquery/3.5.1/jquery.js"></script><script>$(function () {let imgL = $(".box .item").length;console.log(imgL)let deg = 360 / imgL;$(".box .item").each(function (i) {$(this).css({"transform": "rotateY(" +"-"+ i * deg + "deg) translateZ(300px)"});// < !--防止图片被拖拽-->$(this).attr('ondragstart', 'return false');});})</script></body></html>
