Post
Ask Question

3D Image Slider

Introduction

 
In this article, we will make a 3D Image Slider. We will use perspective, transform and transition properties of CSS3 to make the 3D Image Slider. We will also discuss making a nested circle using a div and CSS3.
 
The following image is the result. When we click on the circles we can see the 3D Image Slider Effect or we can use SetInterval() in JavaScript to see the continuously moving image slider. For tips you can refer to my previous blog:
 
http://www.c-sharpcorner.com/Blogs/46552/image-slider-using-jquery.aspx
 
 
Now we will discuss the code.
 
We are using 4 Images placed in 3D space that rotates on circle click. It looks like a rotating cube.
 
The following properties are responsible for the 3D image slider.
 
I had already covered transform and perspective in the article:
 
http://www.c-sharpcorner.com/UploadFile/c325de/3d-rotation-of-element-using-css3/
 
We can refer to it for a flip effect of two elements.
1. perspective: perspective provides 3D space for children elements. It is a distance between the Z plane and the user.
 
2. perspective-origin: It is the vanishing point for 3D space provided by the perspective.
 
Note: Both the preceding properties are applied to the parent element.
 
3. transform-style: It is used to place children's elements in 3D space. It can have the following two values.
  • preserve-3d: It places elements in 3D space.
  • flat: It is like a default HTML element.
4.transform-origin: It allows changing the point of origin of a transform.
 
5. transform: It changes shape, size, and position without disrupting the normal document flow. CSS transforms are rooted in linear algebra and geometry.
 
Now we discuss circles that are created with two nested divs using CSS3.
  1. border-radius: 50%: It is responsible for making a circle-shaped div.
  2. top: 24% and left: 24%: It is responsible for placing a child div exactly in the center.
In JavaScript we are only changing the CSS property transform: rotateY();.
 
Code
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>  
  5.     <style>  
  6.       #controls, figcaption, div {  
  7.         text-align:center;  
  8.       }  
  9.       #controls div{  
  10.         padding-right:.25em;  
  11.         cursor:pointer;  
  12.       }  
  13.   
  14.       #cubeRound {  
  15.         -webkit-perspective: 800;  
  16.         -moz-perspective: 800px;  
  17.         -ms-perspective: 800;  
  18.         perspective: 800;  
  19.   
  20.         -webkit-perspective-origin: 50% 100px;  
  21.         -moz-perspective-origin: 50% 100px;  
  22.         -ms-perspective-origin: 50% 100px;  
  23.         perspective-origin: 50% 100px;  
  24.   
  25.         -webkit-transform-style: preserve-3d;  
  26.         -moz-transform-style: preserve-3d;  
  27.         -ms-transform-style: preserve-3d;  
  28.         transform-style: preserve-3d;  
  29.   
  30.         margin:50px auto 20px auto;  
  31.         width:450px;  
  32.         height:380px;  
  33.       }  
  34.   
  35.       #cubeRound #cubeRotation {  
  36.         position: relative;  
  37.         margin: 0 auto;  
  38.         height: 231px;  
  39.         width: 450px;  
  40.         -webkit-transform-style: preserve-3d;  
  41.         -moz-transform-style: preserve-3d;  
  42.         -ms-transform-style: preserve-3d;  
  43.         transform-style: preserve-3d;  
  44.   
  45.         -webkit-transform-origin: 50% 50px 0;  
  46.         -moz-transform-origin: 50% 50px 0;  
  47.         -ms-transform-origin: 50% 50px 0;  
  48.         transform-origin: 50% 50px 0;  
  49.   
  50.         -webkit-transition:all 1.0s ease-in-out;  
  51.         -moz-transition:all 1.0s ease-in-out;  
  52.         -ms-transition:all 1.0s ease-in-out;  
  53.         transition:all 1.0s ease-in-out;  
  54.   
  55.       }  
  56.   
  57.       #cubeRound .face {  
  58.         position: absolute;  
  59.         height: 251px;  
  60.         width: 450px;  
  61.         padding: 0px;  
  62.       }  
  63.   
  64.       img{  
  65.         height: 251px;  
  66.         width: 450px;  
  67.       }  
  68.        
  69.   
  70.       #cubeRotation .first {  
  71.         -webkit-transform: translateZ(225px);  
  72.         -moz-transform: translateZ(225px);  
  73.         -ms-transform: translateZ(225px);  
  74.         transform: translateZ(225px);  
  75.       }  
  76.   
  77.       #cubeRotation .second {  
  78.         -webkit-transform: rotateY(90deg) translateZ(225px);  
  79.         -moz-transform: rotateY(90deg) translateZ(225px);  
  80.         -ms-transform: rotateY(90deg) translateZ(225px);  
  81.         transform: rotateY(90deg) translateZ(225px);  
  82.       }  
  83.   
  84.       #cubeRotation .third {  
  85.         -webkit-transform: rotateY(180deg) translateZ(225px);  
  86.         -moz-transform: rotateY(180deg) translateZ(225px);  
  87.         -ms-transform: rotateY(180deg) translateZ(225px);  
  88.         transform: rotateY(180deg) translateZ(225px);  
  89.       }  
  90.   
  91.       #cubeRotation .fourth {  
  92.         -webkit-transform: rotateY(-90deg) translateZ(225px);  
  93.         -moz-transform: rotateY(-90deg) translateZ(225px);  
  94.         -ms-transform: rotateY(-90deg) translateZ(225px);  
  95.         transform: rotateY(-90deg) translateZ(225px);  
  96.       }  
  97.       .circle {  
  98.       border-radius: 50%;  
  99.       display: inline-block;  
  100.       margin-right: 20px;  
  101.     }  
  102.       #outerCircle {  
  103.       width: 50px;  
  104.       height: 50px;  
  105.       background: blue;  
  106.       position: relative;  
  107.     }  
  108.       
  109.     #innerCircle {  
  110.       width: 20px;  
  111.       height: 20px;  
  112.       background: orange;  
  113.       position: absolute;  
  114.       top: 24%;  
  115.       left: 24%;  
  116.       display: block;  
  117.       border: 3px solid #fff;  
  118.     }     
  119.     .selected{  
  120.         background: red !important;  
  121.       }  
  122.   
  123.       </style>  
  124.       <script>  
  125.         $(document).ready(function() {  
  126.   
  127.           $("#controls").on('click', 'div', function(){  
  128.             $("#cubeRotation").css("transform","rotateY("+($(this).index() * -90)+"deg)");  
  129.             $("#controls div").removeClass("selected");  
  130.             $(this).addClass("selected");  
  131.           });            
  132.         });  
  133.       </script>  
  134.   </head>  
  135.   
  136.   <body>  
  137.     <div>  
  138.       <h2>3D Image slider</h2>  
  139.       <h3>Happy Diwali</h3>        
  140.       <div id="cubeRound">  
  141.         <div id="cubeRotation">  
  142.           <figure class="face first">  
  143.             <img src="Images/lakshmiGanesh.jpg" />  
  144.             <figcaption>We worship Lakshmi and Ganesh on Diwali.</figcaption>  
  145.           </figure>  
  146.           <figure class="face second">  
  147.             <img src="Images/sweets.jpg" />  
  148.             <figcaption>We distribute sweats and gifts to our friends and relatives.</figcaption>  
  149.           </figure>  
  150.           <figure class="face third">  
  151.             <img src="Images/sitaRam.jpg" />  
  152.             <figcaption>Diwali is celebrated in memory of Ram return to Ayodhya.</figcaption>  
  153.           </figure>  
  154.           <figure class="face fourth">  
  155.             <img src="Images/crackers.jpg" />  
  156.             <figcaption> We lighten crackers on diwali. please use less crackers.</figcaption>  
  157.           </figure>  
  158.         </div>  
  159.       </div>  
  160.       <div id="controls">      
  161.         <div id="outerCircle" class="circle selected">  
  162.           <div id="innerCircle" class="circle"> 1</div>  
  163.         </div>  
  164.         <div id="outerCircle" class="circle">  
  165.           <div id="innerCircle" class="circle"> 2</div>  
  166.         </div>  
  167.         <div id="outerCircle" class="circle">  
  168.           <div id="innerCircle" class="circle">  3</div>  
  169.         </div>  
  170.         <div id="outerCircle" class="circle">  
  171.           <div id="innerCircle" class="circle">  4</div>  
  172.         </div>  
  173.       </div>  
  174.       <h3>Click above to see rotation of Image.</h3>  
  175.     </div>  
  176.   </body>  
  177. </html> 

Conclusion

 
In this article, we studied 3D Image Slider


Similar Articles