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.
HTML
This HTML holds all the div items of the 3D rotating carousel.
<div class="container"> <div class="carousel"> <div class="item a">Adiv> <div class="item b">Bdiv> <div class="item c">Cdiv> <div class="item d">Ddiv> <div class="item e">Ediv> <div class="item f">Fdiv> div> div> <div class="next">Nextdiv> <div class="prev">Prevdiv> |
Next
Prev
CSS
The following CSS adds rotation and 3D effect to the div items.
Jquery
The following Jquery runs rotations and makes 3D rotation actionable on click of next 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> |
