纯css 3D画廊旋转特效

一个创造性的、自动旋转画廊，纯CSS代码实现的相册,通过图像旋转一个3d空间。

旋转动画核心代码

.rotator {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 55%;
  height: 150px;
  transform-style: preserve-3d;
  animation: roter 17s linear infinite;
}

.rotator:hover {
  animation-play-state: paused;
}

@keyframes roter {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.items {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border: 2px solid #333;
}

.items:hover img {
  transform: scale(1.2);
}

.items img {
  height: 100%;
  width: 100%;
  transition: all 3s ease;
}