[CSS3] 3D Image Slider

3D Image Slider

Image 1 Image 2 Image 3 Image 4

Click me to toggle transparency

 

  #controls, #transparency {
    text-align:center;
  }
  #controls span {
    padding-right:2em;
    cursor:pointer;
  }

  #cubeCarousel {
    -webkit-perspective: 800;
    -moz-perspective: 800px;
    -ms-perspective: 800;
    perspective: 800;

    -webkit-perspective-origin: 50% 100px;
    -moz-perspective-origin: 50% 100px;
    -ms-perspective-origin: 50% 100px;
    perspective-origin: 50% 100px;

    margin:100px auto 20px auto;
    width:450px;
    height:300px;
  }

  #cubeCarousel #cubeSpinner {
    position: relative;
    margin: 0 auto;
    height: 281px;
    width: 450px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform-origin: 50% 100px 0;
    -moz-transform-origin: 50% 100px 0;
    -ms-transform-origin: 50% 100px 0;
    transform-origin: 50% 100px 0;

    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -ms-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;

  }

  #cubeCarousel .face {
    position: absolute;
    height: 200px;
    width: 450px;
    padding: 0px;
  }


  #cubeSpinner .one {
    -webkit-transform: translateZ(225px);
    -moz-transform: translateZ(225px);
    -ms-transform: translateZ(225px);
    transform: translateZ(225px);
  }

  #cubeSpinner .two {
    -webkit-transform: rotateY(90deg) translateZ(225px);
    -moz-transform: rotateY(90deg) translateZ(225px);
    -ms-transform: rotateY(90deg) translateZ(225px);
    transform: rotateY(90deg) translateZ(225px);
  }

  #cubeSpinner .three {
    -webkit-transform: rotateY(180deg) translateZ(225px);
    -moz-transform: rotateY(180deg) translateZ(225px);
    -ms-transform: rotateY(180deg) translateZ(225px);
    transform: rotateY(180deg) translateZ(225px);
  }

  #cubeSpinner .four {
    -webkit-transform: rotateY(-90deg) translateZ(225px);
    -moz-transform: rotateY(-90deg) translateZ(225px);
    -ms-transform: rotateY(-90deg) translateZ(225px);
    transform: rotateY(-90deg) translateZ(225px);
  }

  .trans {
    opacity:0.7;
  }

  .imageblock img {
    width:450px;
    height:200px;
  }

$(document).ready(function() {

      $("#controls").on('click', 'span', function(){
        $("#cubeSpinner").css("transform","rotateY("+($(this).index() * -90)+"deg)");
      });

      $("#transparency").click(function() {
        $("#cubeSpinner img").toggleClass("trans");
        $(this).toggleClass("selected");
      });

});