HTML 5

3D Image Slider

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

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs