3D Rotating Cube Slider with Pure CSS / CSS3

Preview:

Description:

This is a 3D rotating (flipping) cube slider built with pure CSS and several CSS3 properties.

How to use it:

Build the markup structure for the cube slider.

<div class="slider">
  <div class="container">
    <div class="slide x"></div>
    <div class="slide y"></div>
    <div class="slide z"></div>
  </div>
  <div class="shadow"></div>
</div>

The core CSS / CSS3 styles for the cube slider.

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 200px;
  height: 200px;
  margin: auto;
  -webkit-perspective: 600px;
  perspective: 600px;
}
.slider * {
  -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
  transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
}
.container {
  width: inherit;
  height: inherit;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg) rotateX(0deg);
  transform: rotateY(0deg) rotateX(0deg);
}
.slide, .slide:after, .slide:before {
  display: block;
  width: inherit;
  height: inherit;
  background: url('1.jpg');
  position: absolute;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  background-size: cover;
  background-position: center;
}
.slide.x {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
.slide.x:after {
  content: '';
  background-image: url('2.png');
  -webkit-transform: translateZ(100px) rotateZ(-90deg);
  transform: translateZ(100px) rotateZ(-90deg);
}
.slide.x:before {
  content: '';
  background-image: url('3.png');
  -webkit-transform: translateZ(-100px) rotateZ(-90deg);
  transform: translateZ(-100px) rotateZ(-90deg);
}
.slide.y {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
.slide.y:after {
  content: '';
  background-image: url('4.jpg');
  -webkit-transform: translateZ(100px) scale(-1);
  transform: translateZ(100px) scale(-1);
}
.slide.y:before {
  content: '';
  background-image: url('5.png');
  -webkit-transform: translateZ(-100px);
  transform: translateZ(-100px);
}
.slide.z {
  -webkit-transform: rotateX(0);
  transform: rotateX(0);
}
.slide.z:after {
  content: '';
  background-image: url('6.png');
  -webkit-transform: translateZ(100px);
  transform: translateZ(100px);
}
.slide.z:before {
  content: '';
  background-image: url('7.jpg');
  -webkit-transform: translateZ(-100px);
  transform: translateZ(-100px);
}
.container {
  -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
  animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}

Create the rotate animations.

@-webkit-keyframes 
rotate {  0%, 10% {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
 15%, 20% {
-webkit-transform: rotateY(180deg) rotateX(0deg);
transform: rotateY(180deg) rotateX(0deg);
}
 25%, 35% {
-webkit-transform: rotateY(180deg) rotateX(270deg);
transform: rotateY(180deg) rotateX(270deg);
}
 40%, 50% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
transform: rotateY(180deg) rotateX(90deg);
}
 55%, 65% {
-webkit-transform: rotateY(-90deg) rotateX(90deg);
transform: rotateY(-90deg) rotateX(90deg);
}
 70%, 80% {
-webkit-transform: rotateY(90deg) rotateX(90deg);
transform: rotateY(90deg) rotateX(90deg);
}
 90%, 95% {
-webkit-transform: rotateY(0deg) rotateX(90deg);
transform: rotateY(0deg) rotateX(90deg);
}
}
@keyframes 
rotate {  0%, 10% {
-webkit-transform: rotateY(0deg) rotateX(0deg);
transform: rotateY(0deg) rotateX(0deg);
}
 15%, 20% {
-webkit-transform: rotateY(180deg) rotateX(0deg);
transform: rotateY(180deg) rotateX(0deg);
}
 25%, 35% {
-webkit-transform: rotateY(180deg) rotateX(270deg);
transform: rotateY(180deg) rotateX(270deg);
}
 40%, 50% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
transform: rotateY(180deg) rotateX(90deg);
}
 55%, 65% {
-webkit-transform: rotateY(-90deg) rotateX(90deg);
transform: rotateY(-90deg) rotateX(90deg);
}
 70%, 80% {
-webkit-transform: rotateY(90deg) rotateX(90deg);
transform: rotateY(90deg) rotateX(90deg);
}
 90%, 95% {
-webkit-transform: rotateY(0deg) rotateX(90deg);
transform: rotateY(0deg) rotateX(90deg);
}
}

Style the slider shadow.

.shadow {
  display: block;
  width: 200px;
  height: 200px;
  background: rgba(0,0,0,0.75);
  position: absolute;
  top: 60%;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="20" /></filter></svg>#filter');
  -webkit-filter: blur(20px);
  filter: blur(20px);
  left: 0;
  right: 0;
  margin: auto;
  -webkit-animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
  animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}
@-webkit-keyframes 
rotateShadow {  0%, 10% {
-webkit-transform: rotateY(0deg) rotateX(90deg);
}
 15%, 20% {
-webkit-transform: rotateY(180deg) rotateX(90deg);;
}
 20.1%, 20.9% {
-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(5px);
}
 25%, 35% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
}
 35.1%, 35.9% {
-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(-5px);
}
 40%, 50% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
}
 55%, 65% {
-webkit-transform: rotateY(0deg) rotateX(90deg);
}
 70%, 80% {
-webkit-transform: rotateY(180deg) rotateX(90deg);
}
 90%, 99% {
-webkit-transform: rotateY(90deg) rotateX(90deg);
}
 99.1%, 99.9% {
-webkit-transform: rotateY(90deg) rotateX(90deg) translatez(-5px);
}
}