HTML 5

CSS3 Flip 3D Effect

Introduction

The CSS3 Flip 3D Effect displays content on the front and back sides of elements when the user interacts with them.
 
To implement the CSS3 Flip 3D Effect we need to understand some properties of CSS3. Let's understand the properties and then we will see an example of the Flip 3D Effect. 
    Margin: The margin properties define the space around elements.
     
    Float: The float property is used to specify whether or not a box should float.
     
    Position: Positions an element.
     
    Font Faimily: Defines a name.
     
    hover: How to style a element when we hover the mouse over it.
     
    -webkit: The prefix for Chrome and Safari.
     
    transform: The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move and/or skew elements. It is used with the prefix -webkit (for Chrome and Safari).

    perspective: The perspective property defines how many pixels a 3D element is placed from the view. It is only use for 3D transformed elements, it is used with the prefix -webkit (for Chrome and Safari).
     
    background: Sets properties such as background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment and background-image.
     
    color: Applys color on the text.

    border-radius: The border-radius property sets the four (top-left, top-right, bottom-right, bottom-left) border radius properties for defining the shape of the corners.
     
    backface-visibility: This property is useful when an element is rotated and you do not want to see its backside.
    • backface-visibility:hidden=>The backside is not visible.

    • backface-visibility:visible=>The backside is visible.

    transition: The transition property applys the four transition properties like transition-property, transition-duration, transition-timing-function and transition-delay.
 
Example: For the practicle implementation we will create an example. In this example I will create 4 Boxes using CSS3 Flip 3D Effect.
 
It is useful in many places, depending on requirements it makes creative effects for the elements.
 
We can also use this type of filp3D boxes in a MenuBar by lacing images or icons at the front side and text like Home, AboutUS and/or Contact as the back side of the boxes. In that manner we can create an animated menu.

Step 1
 
Open a text editor or write the following code and by run it to see the output and whatever images name we will use in the code. All these images should be present at the same location as our code file. 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style type="text/css">  
  5. .flipBox{ width:240px; height:200px; margin:10px; float:left; }  
  6. .flipBox > .front{  
  7.     position:absolute;  
  8.     -webkit-transform: perspective( 600px ) rotateY( 0deg );  
  9.     transform: perspective( 600px ) rotateY( 0deg );  
  10.     background:#F00; width:240px; height:200px; border-radius: 7px;  
  11.     color:#FFF;  
  13.     -webkit-backface-visibility: hidden;  
  14.     backface-visibility: hidden;  
  15.     transition: -webkit-transform .5s linear 0s;  
  16.     transition: transform .5s linear 0s;  
  17. }  
  18. .flipBox > .back{  
  19.     position:absolute;  
  20.     -webkit-transform: perspective( 600px ) rotateY( 180deg );  
  21.     transform: perspective( 600px ) rotateY( 180deg );  
  22.     background:#00F; width:240px; height:200px; border-radius: 7px;  
  23.     color:#FF0;  
  25.     -webkit-backface-visibility: hidden;  
  26.     backface-visibility: hidden;  
  27.     transition: -webkit-transform .5s linear 0s;  
  28.     transition: transform .5s linear 0s;  
  29. }  
  30. .flipBox:hover > .front{  
  31.     -webkit-transform: perspective( 600px ) rotateY( -180deg );  
  32.     transform: perspective( 600px ) rotateY( -180deg );  
  33. }  
  34. .flipBox:hover > .back{  
  35.     -webkit-transform: perspective( 600px ) rotateY( 0deg );  
  36.     transform: perspective( 600px ) rotateY( 0deg );  
  37. }  
  38. </style>  
  39. </head>  
  40. <body>  
  41. <div class="flipBox">  
  42.   <div class="back"></br>Price1<img src="bag.png"/></div>  
  43.   <div class="front"></br></br>Hello C# Corner Box1</div>  
  44. </div>  
  45. <div class="flipBox">  
  46.   <div class="back"></br>Price2<img src="tshirt.png"/></div>  
  47.   <div class="front"></br></br>Hello C# Corner Box2 </div>  
  48. </div>  
  49. <div class="flipBox">  
  50.   <div class="back"></br>Price3<img src="wrist_watch.png"/></div>  
  51.   <div class="front"></br></br>Hello C# Corner Box3</div>  
  52. </div>  
  53. <div class="flipBox">  
  54.   <div class="back"></br>Price4<img src="flash.png"/></div>  
  55.   <div class="front"></br></br>Hello C# Corner Box4</div>  
  56. </div>  
  57. </body>  
  58. </html>  
Step 2
 
I will save this file named "filpcss.html" and by run it in the Chrome browser to see output like this.
 
A) Click on the front side of box.
 
font side
 
B) Click on box2, flip the box2.
 
flip the box
 
C) Back side of box2.
 
side of box
 
D) Back side of box1.

back the site of box
 
E) Back side of box3.

back site of box image
 
F) Back side of box4.

back site of box pic
 
It is a simple example of the CSS3 Filp3D Effect. Happy coding. Thank you. 

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