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)"


2 Replies to “How to Create 3D Rotating Gallery with CSS and Jquery”

  1. Hello,
    I am a Year 1 student doing Graphic Design, and, I have to say that this has helped me a lot. But I kinda had a small problem though. The rotating gallery, is a bit too close to the top of the page. How do I bring that down, because I need space on top to add more elements.
    Please do reply as soon as possible, I have to submit my final project on 5/2/2019.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.