How to Create 3D Rotating Gallery with CSS and Jquery

Today I found a wonderful code snippet in Jquery and CSS 3 to create simple 3D rotating gallery. You can use following  snippet to display your portfolio or images in 3D rotation manner with next and previous button. I relay found this  3D Rotating Gallery  makes your web portal more attractive and dynamic. The 3D effect makes image gallery more attractive and provides a better user interface, You can not only rotate images but also rotate whole div items easily using following code snippet.

3D Rotating Carousel with CSS and Jquery

The following HTML, CSS & Jquery is used to create a 3D rotating carousel.


This HTML holds all the div items of the 3D rotating carousel.

<div class="container">
  <div class="carousel">
    <div class="item a">A</div>
    <div class="item b">B</div>
    <div class="item c">C</div>
    <div class="item d">D</div>
    <div class="item e">E</div>
    <div class="item f">F</div>
<div class="next">Next</div>
<div class="prev">Prev</div>


The following CSS adds rotation and 3D effect to the div items.

body {
  background: #333;
  padding: 70px 0;
  font: 15px/20px Arial, sans-serif;
.container {
  margin: 0 auto;
  width: 250px;
  height: 200px;
  position: relative;
  perspective: 1000px;
.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  border-radius: 10px;
.a {
  transform: rotateY(0deg) translateZ(250px);
  background: #ed1c24;
.b {
  transform: rotateY(60deg) translateZ(250px);
  background: #0072bc;
.c {
  transform: rotateY(120deg) translateZ(250px);
  background: #39b54a;
.d {
  transform: rotateY(180deg) translateZ(250px);
  background: #f26522;
.e {
  transform: rotateY(240deg) translateZ(250px);
  background: #630460;
.f {
  transform: rotateY(300deg) translateZ(250px);
  background: #8c6239;
.next, .prev {
  color: #444;
  position: absolute;
  top: 100px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 104px;
  box-shadow: 0 1px 0 #999;
.next { right: 5em; }
.prev { left: 5em; }


The following Jquery runs rotations and makes 3D rotation actionable on click of next and previous button.

<script src=""></script> 
$(function() { 
 var carousel = $(".carousel"),
    currdeg  = 0;
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
function rotate(e){
    currdeg = currdeg - 60;
    currdeg = currdeg + 60;
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"