Automatic 3D Image Rotator With Pure CSS

Preview:

Description:

This is an automatic 3D image slider/slideshow/carousel/rotator with zoom-on-hover and pause-on-hover support, built with pure CSS and CSS3.

How to use it:

Insert your images to the 3D rotator.

<section id="slideshow">
  <div class="entire-content">
    <div class="content-carrousel">
      <figure class="shadow"><img src="1.jpg"/></figure>
      <figure class="shadow"><img src="2.jpg"/></figure>
      <figure class="shadow"><img src="3.jpg"/></figure>
      <figure class="shadow"><img src="4.jpg"/></figure>
      <figure class="shadow"><img src="5.jpg"/></figure>
      ...
    </div>
  </div>
</section>

The primary CSS/CSS3 for the 3D rotator. Modify, override the following CSS snippets and insert them into your web page.

#slideshow {
  margin: 0 auto;
  padding-top: 50px;
  height: 600px;
  width: 100%;
  background-color: #6adecd;
  box-sizing: border-box;
}
.entire-content {
  margin: auto;
  width: 190px;
  perspective: 1000px;
  position: relative;
  padding-top: 80px;
}
.content-carrousel {
  width: 100%;
  position: absolute;
  float: right;
  animation: rotar 15s infinite linear;
  transform-style: preserve-3d;
}
.content-carrousel:hover {
  animation-play-state: paused;
  cursor: pointer;
}
.content-carrousel figure {
  width: 100%;
  height: 120px;
  border: 1px solid #3b444b;
  overflow: hidden;
  position: absolute;
}
.content-carrousel figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(300px); 
} .content-carrousel figure:nth-child(2) {
  transform: rotateY(40deg) translateZ(300px); 
} .content-carrousel figure:nth-child(3) {
  transform: rotateY(80deg) translateZ(300px); 
} .content-carrousel figure:nth-child(4) {
  transform: rotateY(120deg) translateZ(300px); 
} .content-carrousel figure:nth-child(5) {
  transform: rotateY(160deg) translateZ(300px); 
} .content-carrousel figure:nth-child(6) {
  transform: rotateY(200deg) translateZ(300px); 
} .content-carrousel figure:nth-child(7) {
  transform: rotateY(240deg) translateZ(300px); 
} .content-carrousel figure:nth-child(8) {
  transform: rotateY(280deg) translateZ(300px); 
} .content-carrousel figure:nth-child(9) {
  transform: rotateY(320deg) translateZ(300px); 
} .content-carrousel figure:nth-child(10) {
  transform: rotateY(360deg) translateZ(300px); 
} 
.shadow {
    position: absolute;
    box-shadow: 0px 0px 20px 0px #000;
    border-radius: 1px;
}
.content-carrousel img {
  image-rendering: auto;
  transition: all 300ms;
  width: 100%;
  height: 100%;
}
.content-carrousel img:hover {
  transform: scale(1.2);
  transition: all 300ms;
}
@keyframes rotar {
  from {
    transform: rotateY(0deg);
  } to {
    transform: rotateY(360deg);
  }
}