3D Perspective Image Rotator With Pure CSS

Preview:

Description:

A 3D perspective image rotator that takes advantage of CSS3 animations and 3D transforms for the auto rotation.

How to use it:

Insert a group of images to the rotator.

<div class="carousel">
  <img class="slide" draggable="false" src="1.png"/>
  <img class="slide" draggable="false" src="2.png"/>
  <img class="slide" draggable="false" src="3.png"/>
  <img class="slide" draggable="false" src="4.png"/>
  <img class="slide" draggable="false" src="5.png"/>
</div>

The main CSS styles for the rotator.

.carousel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140px;
  height: 97px;
  margin-left: -70px;
  margin-top: -48.5px;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(-5deg) rotateY(0);
  -ms-transform: rotateX(-5deg) rotateY(0);
  transform: rotateX(-5deg) rotateY(0);
  -webkit-animation: turn 20s infinite linear;
  -moz-animation: turn 20s infinite linear;
  -o-animation: turn 20s infinite linear;
  animation: turn 20s infinite linear;
}
.carousel .slide {
  position: absolute;
  width: 140px;
  height: 97px;
  border-radius: 8px;
  box-shadow: 0 0 4px 1px #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

The required CSS styles for the slide images.

.carousel .slide:nth-child(1) {
  -webkit-transform: rotateY(0deg) translateZ(196px);
  -ms-transform: rotateY(0deg) translateZ(196px);
  transform: rotateY(0deg) translateZ(196px);
}
.carousel .slide:nth-child(2) {
  -webkit-transform: rotateY(51.42857deg) translateZ(196px);
  -ms-transform: rotateY(51.42857deg) translateZ(196px);
  transform: rotateY(51.42857deg) translateZ(196px);
}
.carousel .slide:nth-child(3) {
  -webkit-transform: rotateY(102.85714deg) translateZ(196px);
  -ms-transform: rotateY(102.85714deg) translateZ(196px);
  transform: rotateY(102.85714deg) translateZ(196px);
}
.carousel .slide:nth-child(4) {
  -webkit-transform: rotateY(154.28571deg) translateZ(196px);
  -ms-transform: rotateY(154.28571deg) translateZ(196px);
  transform: rotateY(154.28571deg) translateZ(196px);
}
.carousel .slide:nth-child(5) {
  -webkit-transform: rotateY(205.71429deg) translateZ(196px);
  -ms-transform: rotateY(205.71429deg) translateZ(196px);
  transform: rotateY(205.71429deg) translateZ(196px);
}
.carousel .slide:nth-child(6) {
  -webkit-transform: rotateY(257.14286deg) translateZ(196px);
  -ms-transform: rotateY(257.14286deg) translateZ(196px);
  transform: rotateY(257.14286deg) translateZ(196px);
}
.carousel .slide:nth-child(7) {
  -webkit-transform: rotateY(308.57143deg) translateZ(196px);
  -ms-transform: rotateY(308.57143deg) translateZ(196px);
  transform: rotateY(308.57143deg) translateZ(196px);
}

Auto change the angles of the rotator when running.

@-webkit-keyframes 
turn {  50% {
 -webkit-transform: rotateX(5deg) rotateY(0.5turn);
 -ms-transform: rotateX(5deg) rotateY(0.5turn);
 transform: rotateX(5deg) rotateY(0.5turn);
}
 100% {
 -webkit-transform: rotateX(-5deg) rotateY(1turn);
 -ms-transform: rotateX(-5deg) rotateY(1turn);
 transform: rotateX(-5deg) rotateY(1turn);
}
}
@-moz-keyframes 
turn {  50% {
 -webkit-transform: rotateX(5deg) rotateY(0.5turn);
 -ms-transform: rotateX(5deg) rotateY(0.5turn);
 transform: rotateX(5deg) rotateY(0.5turn);
}
 100% {
 -webkit-transform: rotateX(-5deg) rotateY(1turn);
 -ms-transform: rotateX(-5deg) rotateY(1turn);
 transform: rotateX(-5deg) rotateY(1turn);
}
}
@-o-keyframes 
turn {  50% {
 -webkit-transform: rotateX(5deg) rotateY(0.5turn);
 -ms-transform: rotateX(5deg) rotateY(0.5turn);
 transform: rotateX(5deg) rotateY(0.5turn);
}
 100% {
 -webkit-transform: rotateX(-5deg) rotateY(1turn);
 -ms-transform: rotateX(-5deg) rotateY(1turn);
 transform: rotateX(-5deg) rotateY(1turn);
}
}
@keyframes 
turn {  50% {
 -webkit-transform: rotateX(5deg) rotateY(0.5turn);
 -ms-transform: rotateX(5deg) rotateY(0.5turn);
 transform: rotateX(5deg) rotateY(0.5turn);
}
 100% {
 -webkit-transform: rotateX(-5deg) rotateY(1turn);
 -ms-transform: rotateX(-5deg) rotateY(1turn);
 transform: rotateX(-5deg) rotateY(1turn);
}
}