CSS旋转木马核心是用transform-style: preserve-3d使图片在3D空间中等角度分布于圆周，再通过@keyframes驱动容器rotateY持续公转，配合translateZ实现深度感和环绕效果。
用 CSS rotate 做旋转木马式图片轮播，核心是让多张图片围绕一个圆心做 3D 空间中的等角度分布，并通过 @keyframes 持续旋转容器，形成“ carousel（旋转木马）”效果。它不是左右平移，而是真正在 Z 轴上绕中心点转动，视觉上像摩天轮或唱片机——每张图在不同深度和角度上依次转到正面。
一、结构准备：环形布局的 HTML 骨架
先搭一个容器，里面放若干 img 或带图的 div。关键点是：所有子项要绝对定位，并共享同一个父级旋转中心（通常设为 transform-origin: center）。
示例结构：
<div class="carousel"> <img src="1.jpg" alt="css旋转木马式图片区怎么做_利用rotate的keyframes驱动轮播" > <img src="2.jpg" alt="css旋转木马式图片区怎么做_利用rotate的keyframes驱动轮播" > <img src="3.jpg" alt="css旋转木马式图片区怎么做_利用rotate的keyframes驱动轮播" > <img src="4.jpg" alt="css旋转木马式图片区怎么做_利用rotate的keyframes驱动轮播" > <img src="5.jpg" alt="css旋转木马式图片区怎么做_利用rotate的keyframes驱动轮播" > </div>
二、CSS 定位：把每张图“摆”到圆周上
用 transform: rotateY(...) rotateZ(...) translateZ(...) 组合，把每张图推到虚拟圆环的不同角度位置。常用技巧是：固定半径（如 200px），按张数均分角度（如 5 张 → 每张间隔 360° / 5 = 72°），再用 :nth-child(n) 分别设置。
立即学习“前端免费学习笔记（深入）”；
关键样式片段：
.carousel {
width: 200px; height: 200px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d; /* 必须开启 3D 空间 */
transform-origin: center;
}
<p>.carousel img {
position: absolute;
width: 120px; height: 160px;
top: 50%; left: 50%;
margin: -80px 0 0 -60px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transform-style: preserve-3d;
}</p><p>/<em> 5 张图，均匀分布在圆周上 </em>/
.carousel img:nth-child(1) { transform: rotateY(0deg) translateZ(200px); }
.carousel img:nth-child(2) { transform: rotateY(72deg) translateZ(200px); }
.carousel img:nth-child(3) { transform: rotateY(144deg) translateZ(200px); }
.carousel img:nth-child(4) { transform: rotateY(216deg) translateZ(200px); }
.carousel img:nth-child(5) { transform: rotateY(288deg) translateZ(200px); }三、动画驱动：用 keyframes 控制整体旋转
不旋转单张图，而是对 .carousel 容器本身加 rotateY 动画，这样所有子项会跟着同步绕 Y 轴公转，正面图自然流转 —— 就像旋转木马的底座在转，每个座位（图片）保持朝向不变但位置变化。
动画定义示例：
@keyframes carouselRotate {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
<p>.carousel {
animation: carouselRotate 15s linear infinite;
}- 时间越长，转得越慢；可配合
animation-duration微调节奏 - 用
linear保证匀速，避免卡顿感 - 若想暂停/交互控制，可改用
animation-play-state: paused配合 hover 或 JS 切换
四、增强体验的小细节
纯 CSS 实现虽轻量，但加点小优化更自然：
- 给容器加
perspective: 1200px（写在父级或 body 上），增强 3D 深度感 - 为图片加
backface-visibility: hidden，防止背面翻转时闪烁 - 用
transform: scale(1.1)+z-index提升当前“正对镜头”的那张图，突出焦点（需配合 JS 计算角度，或用 CSS 自定义属性 + :has() 实验性方案） - 若内容需响应式，建议用
vw或 JS 动态设translateZ半径，避免小屏挤压
基本上就这些。不复杂但容易忽略的是 transform-style: preserve-3d 和 perspective 的层级关系——它们必须出现在正确位置，否则 3D 效果会塌陷成平面。动手试一次，调几个角度和时间，就能看到木马转起来了。
