CSS3实现图片的3D旋转效果

要使用CSS3实现图片的3D旋转效果，你可以使用transform属性的rotateY函数来创建Y轴的旋转，以及perspective属性来添加一些3D效果。下面是一个简单的例子：

HTML:

<div class="container">
  <img src="path_to_your_image.jpg" alt="Rotating Image" class="rotate-image">
</div>

CSS:

.container {
  perspective: 800px; /* 设置透视距离，增加3D效果 */
  width: 400px; /* 容器宽度 */
  height: 300px; /* 容器高度 */
  margin: 50px auto; /* 上下间距，左右居中 */
}
 
.rotate-image {
  width: 100%; /* 图片宽度 */
  height: auto; /* 图片高度 */
  transition: transform 5s infinite; /* 应用旋转动画 */
  transform-style: preserve-3d; /* 保持3D效果 */
}
 
/* 触发动画 */
.container:hover .rotate-image {
  transform: rotateY(360deg); /* Y轴旋转360度 */
}

这段代码会在鼠标悬停在.container上时触发.rotate-image的3D旋转效果，它会持续旋转360度，每次动画时长为5秒，并且无限循环。你可以根据需要调整.container的perspective值和.rotate-image的transition时间。