How to Create 3D Rotating Gallery with CSS and Jquery

Rotating Gallery

Today I found a astonishing code snippet in CSS and Jquery 3 to make easy 3D Rotating Gallery. You can use considering snippet to display your portfolio or images in 3D rotation way of brute subsequent to adjacent-door and previous button. I relay found this 3D Rotating Gallery makes your web portal more handsome and in force. The 3D effect makes image gallery more suitable and provides a enlarged user interface, You can not on your own interchange images but in addition to exchange cumulative div items easily using bearing in mind code snippet.

3D Rotating Carousel in addition to CSS and Jquery

The when HTML, CSS & Jquery is used to make a 3D rotating carousel.

HTML

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

<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>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

CSS

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

<style>
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; }
</style>

Jquery

The subsequently Jquery runs rotations and makes 3D rotation actionable upon click of when-door and previous button.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script>
$(function() { 
 var carousel = $(".carousel"),
    currdeg  = 0;
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
 
function rotate(e){
  if(e.data.d=="n"){
    currdeg = currdeg - 60;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 60;
  }
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
}
});
</script>

Leave a Reply