需求

3D图片旋转

效果图

实现步骤

html结构

最外层容器<div class=".container">
旋转容器<ul>
图片列表<li>

<div class="container">
    <ul>
      <li><img src="./assets/rotate1.jpg"></li>
      <li><img src="./assets/rotate2.jpg"></li>
      <li><img src="./assets/rotate3.jpg"></li>
      <li><img src="./assets/rotate4.jpg"></li>
      <li><img src="./assets/rotate5.jpg"></li>
      <li><img src="./assets/rotate6.jpg"></li>
    </ul>
  </div>

css样式

最外层容器给大小位置，以及透视perspective: 1200px

给父元素设置透视属性，才能使3d属性生效，包括（rotate3d，translateZ等和z轴有关的属性）

透视指的是z=0平面与人眼的距离，perspective一般取值800px~1200px。根据近大远小的规则，适当调整图片的大小。

旋转的盒子ul设置transform-style: perserve-3d，表示transform变换基于3维坐标系（默认2维平面）
将所有图片位置重叠.container ul li {position: absolute;}
每张图片旋转角度不同，例子中含6张图片，每张旋转60度；旋转后往z轴移动一定距离。

.rotate-animation ul li:nth-child(1) {
  transform: rotateY(0deg) translateZ(300px);
}
.rotate-animation ul li:nth-child(2) {
  transform: rotateY(60deg) translateZ(300px);
}
.rotate-animation ul li:nth-child(3) {
  transform: rotateY(120deg) translateZ(300px);
}
.rotate-animation ul li:nth-child(4) {
  transform: rotateY(180deg) translateZ(300px);
}
.rotate-animation ul li:nth-child(5) {
  transform: rotateY(240deg) translateZ(300px);
}
.rotate-animation ul li:nth-child(6) {
  transform: rotateY(300deg) translateZ(300px);
}

生成静态效果，如图：

为旋转盒子ul设置旋转动画，沿Y轴旋转

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateY(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateY(360deg);
  }

translate(-50%, -50%)是为了防止旋转盒子偏离位置，保证其居中。

图像酷炫，为图片设置下方阴影-webkit-box-reflect: below 1px linear-gradient(tranparent, rgba(0, 0, 0, .5))
鼠标hover暂停旋转ul:hover { animation-play-state: paused }

完整代码见：github.com/gmx-white/c…

简单的3d旋转木马效果

需求

效果图

实现步骤

html结构

css样式