在css3中制作旋转木马3d轮播效果，核心是利用 transform-style: preserve-3d 开启3d空间，并通过 rotatey 和 translatez 将子元素分布在圆柱体表面。具体做法是为容器设置透视 perspective，为轨道设置3d变换样式，并为每个幻灯片计算固定的旋转角度和位移距离，从而实现平滑的3d切换动画。
如何构建支持3D变换的HTML结构与基础CSS
构建结构时，需要一个外层视口容器和一个内层旋转轨道。视口容器负责提供 perspective 属性以产生近大远小的3D景深效果，而内层轨道则必须设置 transform-style: preserve-3d，否则子元素的3D变换会被压平到2D平面。每个幻灯片作为轨道的直接子项，初始状态下通过 transform 定位到圆周上的特定位置。
.carousel-viewport {
width: 300px;
height: 200px;
perspective: 1000px;
}
.carousel-track {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s ease-in-out;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
上述代码定义了基本的布局框架。 perspective: 1000px 决定了观察者的视点距离，数值越小透视感越强。 transition 属性应用于轨道，确保当轨道发生旋转时，所有子元素同步平滑移动。 backface-visibility: hidden 用于隐藏幻灯片的背面，避免在旋转过程中看到反向的内容，提升视觉效果。
如何通过JavaScript控制3D旋转角度与位置
控制旋转的关键在于计算当前激活幻灯片的索引，并据此更新轨道的 transform 属性。假设共有N个幻灯片，每个幻灯片在圆周上占据的角度为 360 / N。为了将第i个幻灯片转到正前方（即Z轴正向），需要将轨道沿Y轴旋转 -i * (360 / N) 度。同时，需要预先计算好每个幻灯片在Z轴上的位移量 R，使得它们刚好构成一个闭合的圆环。
const slides = document.querySelectorAll('.slide');
const track = document.querySelector('.carousel-track');
const totalSlides = slides.length;
const radius = Math.round( (300 / 2) / Math.tan( Math.PI / totalSlides ) );
let currentIndex = 0;
function rotateCarousel() {
const angle = -currentIndex * (360 / totalSlides);
track.style.transform = `rotateY(${angle}deg)`;
}
// 初始化每个幻灯片的位置
slides.forEach((slide, index) => {
const theta = index * (360 / totalSlides);
slide.style.transform = `rotateY(${theta}deg) translateZ(${radius}px)`;
});
console.log(`Radius calculated: ${radius}px`);
这段脚本首先获取所有幻灯片节点，并根据容器宽度和幻灯片数量计算半径 radius。公式 r = w / (2 * tan(π/n)) 确保了幻灯片紧密排列且无重叠。 rotateCarousel 函数根据当前索引计算旋转角度并应用。初始化循环为每个幻灯片设置了独立的 rotateY 和 translateZ，使其固定在圆周的正确位置上。当用户点击“下一张”按钮时，只需增加 currentIndex 并调用该函数即可实现轮播。
当幻灯片数量为奇数或偶数时布局有何差异
幻灯片数量的奇偶性主要影响视觉对称性和中心幻灯片的处理逻辑。在标准的3D圆柱体布局中，无论奇偶，数学计算公式均适用。然而，当数量为偶数时，通常会有一个幻灯片正对观察者，而其对面的幻灯片背对观察者，这种对称性使得居中效果非常稳定。当数量为奇数时，正前方的幻灯片两侧各有相同数量的幻灯片，但正后方没有直接对应的幻灯片，而是两个幻灯片之间的空隙。在实际开发中，若希望始终有一个幻灯片居中显示，建议采用偶数个幻灯片，或者在奇数情况下调整视角或增加一个不可见的占位符来维持对称性。此外，奇数个幻灯片在某些角度下可能导致边缘幻灯片的重叠感略有不同，但通过 backface-visibility: hidden 可有效掩盖背面内容，减少视觉干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
