Contribute
HTML 5

3D Rotation of Element Using CSS3

Introduction

In this article we will focus on 3D rotation of an element using transform, perspective, rotate, backface-visibility and transition properties of CSS3 that will look like a flipping card effect. The rotation of an element is possible due to CSS3, so it will work on all the latest browsers. First we will discuss a little about the properties responsible for 3D rotation.

transform: The CSS transform property allows us to modify the coordinate space of the CSS visual formatting model. Elements can be translated, rotated, scaled and skewed depending on the values set.

perspective: To activate 3D space, an element needs perspective. This can be applied in one of the following two ways:

  • perspective as a functional notation

    transform: perspective( a);

    a is the value in px like 500px
     
  • perspective property

    perspective: 500px;

    The functional notation is convenient for directly applying a 3D transform on a single element. But when used on multiple elements, the transformed elements don't line up as expected. If you use the same transform across elements with different positions, each element will have its own vanishing point. So, as a solution use the perspective property on a parent element, so each child may share the same 3D space.

rotate(): It defines a transformation that moves the element around a fixed point without deforming it.

Syntax: rotate(a)

a is the angle representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. A rotation by 180° is called point reflection.

backface-visibility: There are cases when we do not want the front face of an element to be visible through the back face, like when doing a flipping card effect (setting two elements side-to-side). With 3D transforms, we can rotate an element so we want the "front" of an element no longer displayed on the screen.

transition: It controls the speed of animation when changing CSS properties. Instead of having property the changes take effect immediately, we can change in a property to take place over a period of time. We can specify which properties to animate (by listing them explicitly), when the animation will start (by setting a delay), how long the transition will last (by setting a duration) and how the transition will run (by defining a timing function, for example linearly or quick at the beginning, slow at the end).

Animations that involve transitioning between two states are often called implicit transitions since the states between the start and final states are implicitly defined by the browser.

Example

The following example shows a fruit image on mouse over of the color div. You can add any image for testing purposes. A practical implementation of this example is for small kids when they mouse over a color they will get a fruit image of that color.

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.     <title>Flip</title>   
  5.     <style type="text/css">  
  6.         .flip3D{width:240px; height:200px; margin:10px; float:left;}  
  7.         .flip3D > .front{  
  8.             position:absolute;  
  9.             transform:perspective(600px) rotateY(0deg );  
  10.             background:red; width:240px; height:200px; border-radius:7px;   
  11.             backface-visibility:hidden;  
  12.             transition: transform .5s linear 0s;   
  13.         }  
  14.   
  15.         .flip3D > .back{  
  16.             position:absolute;  
  17.             transform:perspective(600px) rotateY(180deg );  
  18.             background:white; width:240px; height:200px; border-radius:7px;  
  19.             backface-visibility:hidden;  
  20.             transition: transform .5s linear 0s;   
  21.         }  
  22.   
  23.         .flip3D:hover > .front{  
  24.             transform:perspective(600px) rotateY(-180deg);  
  25.         }  
  26.   
  27.         .flip3D:hover > .back{  
  28.             transform:perspective(600px) rotateY(0deg);  
  29.         }  
  30.   
  31.         #div1  
  32.         {  
  33.             background: Red;  
  34.         }  
  35.         #div2  
  36.         {  
  37.             background :Blue;  
  38.         }  
  39.         #div3  
  40.         {  
  41.             background :Yellow;  
  42.         }  
  43.         #div4  
  44.         {  
  45.             background :Green;  
  46.         }  
  47.         #div5  
  48.         {  
  49.             background :Black;  
  50.             color:white;   
  51.         }  
  52.   
  53.         div p  
  54.         {  
  55.             font-weight:bold;  
  56.             font-size:20px;   
  57.             vertical-align: middle;   
  58.             text-align: center;  
  59.         }  
  60.   
  61.         img  
  62.         {  
  63.             background:white;   
  64.             width:240px;   
  65.             height:200px;   
  66.             border-radius:7px;  
  67.         }  
  68.     </style>  
  69.     </head>  
  70.     <body>  
  71.         <div class="flip3D">  
  72.             <div class="back"><img src="apple.jpg" /> </div>  
  73.             <div class="front" id= "div1"><p>Red Color</p></div>  
  74.         </div>  
  75.         <div class="flip3D">  
  76.             <div class="back"><img src="blueberry.jpg" /> </div>  
  77.             <div class="front" id= "div2"><p>Blue Color</p></div>  
  78.         </div>  
  79.         <div class="flip3D">  
  80.             <div class="back"><img src="banana.jpg" /></div>  
  81.             <div class="front" id= "div3"><p>Yellow Color</p></div>  
  82.         </div>  
  83.         <div class="flip3D">  
  84.             <div class="back"><img src="Guava.jpg" /></div>  
  85.             <div class="front" id= "div4"><p>Green Color</p></div>  
  86.         </div>  
  87.         <div class="flip3D">  
  88.             <div class="back"><img src="jamun.jpg" /></div>  
  89.             <div class="front" id= "div5"><p>Black Color</p></div>  
  90.         </div>  
  91.     </body>  
  92. </html>  
Result 

We can see the flip effect on each square color. I am sharing a screen shot. When we mouse over the Green color the following changes in the browser can be seen.

Note: These are properties of CSS3 and work in the latest browsers. For different browsers you can prefix the property.

CSS 3 Design in Web Browser

CSS Design in Web Browser

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