单张图片 css写出类似旋转木马的动画

可以使用CSS3的3D转换和动画属性来实现类似旋转木马的动画效果。以下是一个简单的示例：

HTML代码：

<div class="carousel">
  <img src="image1.jpg" alt="Image 1" />
  <img src="image2.jpg" alt="Image 2" />
  <img src="image3.jpg" alt="Image 3" />
  <img src="image4.jpg" alt="Image 4" />
  <img src="image5.jpg" alt="Image 5" />
</div>

CSS代码：

.carousel {
  position: relative;
  width: 500px; /* 设置容器宽度 */
  height: 300px; /* 设置容器高度 */
  margin: 0 auto; /* 居中显示 */
  perspective: 1000px; /* 设置透视距离 */
}

.carousel img {
  position: absolute;
  width: 80%; /* 设置图片宽度 */
  height: 80%; /* 设置图片高度 */
  left: 10%; /* 居中显示 */
  top: 10%; /* 居中显示 */
  transform-style: preserve-3d; /* 设置变换样式 */
  transition: transform 1s; /* 设置过渡效果 */
}

.carousel img:first-child {
  transform: rotateY(0deg) translateZ(0); /* 设置第一张图片的初始状态 */
}

.carousel img:nth-child(2) {
  transform: rotateY(60deg) translateZ(200px); /* 设置第二张图片的初始状态 */
}

.carousel img:nth-child(3) {
  transform: rotateY(120deg) translateZ(200px); /* 设置第三张图片的初始状态 */
}

.carousel img:nth-child(4) {
  transform: rotateY(180deg) translateZ(200px); /* 设置第四张图片的初始状态 */
}

.carousel img:last-child {
  transform: rotateY(240deg) translateZ(200px); /* 设置最后一张图片的初始状态 */
}

.carousel:hover img {
  transform: rotateY(-60deg); /* 设置鼠标悬停时的动画效果 */
}

解释：

首先，将容器设置为相对定位，宽度和高度分别为500px和300px，并设置透视距离为1000px。图片设置为绝对定位，宽度和高度分别为80%，并居中显示。设置图片的变换样式为preserve-3d，表示在3D空间内进行变换。

接着，为每张图片设置不同的初始状态，即旋转角度和Z轴位移。第一张图片的旋转角度为0度，Z轴位移为0；第二张图片的旋转角度为60度，Z轴位移为200px；第三张图片的旋转角度为120度，Z轴位移为200px；第四张图片的旋转角度为180度，Z轴位移为200px；最后一张图片的旋转角度为240度，Z轴位移为200px。

最后，在鼠标悬停时，将所有图片旋转-60度，从而实现类似旋转木马的动画效果。

注意：这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整。