这段代码创建了一个 3D 图片轮播效果，其中包含 8 张图片。图片在 3D 空间中围绕 Y 轴旋转，形成一个循环的轮播效果。CSS 的@keyframes 动画定义了图片的旋转路径，而 transform-style: preserve-3d 属性确保了 3D 效果的正确显示。每张图片通过不同的 rotateY 和 translateZ 属性定位在 3D 空间中的不同位置。
演示效果
HTML&CSS
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>公众号关注：前端Hardy</title> </head> <style> body { display: flex; justify-content: center; margin: 0; padding: 0; background: #efb3d5; } .container { position: relative; margin-top: 50px; } .stage { position: relative; width: 800px; height: 240px; margin: 20px auto; perspective: 2000px; transform-style: preserve-3d; -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(239, 179, 213, 0.8)); } .stage .control { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg); animation: rotate 30s linear infinite; } .stage .control .imgWrap { position: absolute; width: 400px; height: 400px; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; } .stage .control .imgWrap .img { position: absolute; width: 500px; height: 400px; line-height: 400px; text-align: center; font-size: 120px; top: 0; left: 0; object-fit: cover; transform-style: preserve-3d; transform-origin: 50% 50% 0px; } .stage .control .imgWrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; } .stage .control .imgWrap .img1 { transform: rotateY(80deg) translateZ(650px); } .stage .control .imgWrap .img2 { transform: rotateY(125deg) translateZ(650px); } .stage .control .imgWrap .img3 { transform: rotateY(170deg) translateZ(650px); } .stage .control .imgWrap .img4 { transform: rotateY(215deg) translateZ(650px); } .stage .control .imgWrap .img5 { transform: rotateY(260deg) translateZ(650px); } .stage .control .imgWrap .img6 { transform: rotateY(305deg) translateZ(650px); } .stage .control .imgWrap .img7 { transform: rotateY(350deg) translateZ(650px); } .stage .control .imgWrap .img8 { transform: rotateY(395deg) translateZ(650px); } @keyframes rotate { 0% { transform: translateZ(-2000px) rotateY(0deg); } 35% { transform: translateZ(-2000px) rotateY(-250deg); } 70% { transform: translateZ(-2000px) rotateY(-500deg); } 100% { transform: translateZ(-2000px) rotateY(-720deg); } } </style> <body> <div class="container"> <div class="stage"> <div class="control"> <div class="imgWrap"> <div class="img img1"> <img src="./img/p1.jpg" /> </div> <div class="img img2"> <img src="./img/p2.jpg" /> </div> <div class="img img3"> <img src="./img/p3.jpg" /> </div> <div class="img img4"> <img src="./img/p4.jpg" /> </div> <div class="img img5"> <img src="./img/p5.jpg" /> </div> <div class="img img6"> <img src="./img/p6.jpg" /> </div> <div class="img img7"> <img src="./img/p7.png" /> </div> <div class="img img8"> <img src="./img/p8.png" /> </div> </div> </div> </div> </div> </body> <script></script> </html>
HTML 结构
- container：主容器，用于居中显示舞台（stage）。
- stage：舞台，用于创建 3D 效果的容器。
- control：控制容器，包含所有图片，并在 3D 空间中旋转。
- imgWrap：图片包装器，用于包含所有图片元素。
- img img1 至 img img8：每个类名为 img 的 div 元素包含一个图片，并通过不同的 imgX 类来区分和定位。
CSS 样式
- body：设置页面的显示方式、外边距和背景色。
- .container：设置容器的位置和外边距。
- .stage：设置舞台的尺寸、位置、透视和 3D 样式。
- .stage .control：设置控制容器的尺寸、3D 样式和动画。
- .stage .control .imgWrap：设置图片包装器的位置和 3D 样式。
- .stage .control .imgWrap .img：设置图片的尺寸、位置和 3D 样式。
- .stage .control .imgWrap img：设置图片的尺寸和圆角。
- .stage .control .imgWrap .img1 至.stage .control .imgWrap .img8：为每张图片设置不同的 3D 旋转和位置。
- @keyframes rotate：定义一个关键帧动画，用于控制图片轮播的旋转效果。
