How to create 3D flipping effect on mouse hover using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use the CSS backface-visibility property

You can use the CSS backface-visibility property in combination with the transform functions to create stunning flipping and revolving effect without using any JavaScript.

In the following example there are two images, one is front side and other is back side of the pocker card, where back side is placed over the front side using the CSS positioning method, so that at the beginning only one side of the card is visible.

When you place the cursor over the back side of the card image it revolves and front side of the card will be displayed. The backface-visibility of both the front and back elements are hidden so that the back side of the flipped elements does not display during the transformation, which create the illusion of 3D rotation.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>CSS 3D Rotation on Mouseover</title>
  • <style type="text/css">
  •     .flip-container {
  •         margin: 50px;
  •         perspective: 1000;
  •         display: inline-block;
  •     }
  •     .flip-container:hover .card {
  •         transform: rotateY(180deg);
  •     }
  •     .card, .front, .back {
  •         width: 130px;
  •         height: 195px;
  •     }
  •     .card {
  •         transition: 0.5s;
  •         transform-style: preserve-3d;
  •         position: relative;
  •     }
  •     .front, .back {
  •         backface-visibility: hidden;
  •         position: absolute;
  •     }
  •     .front {
  •         z-index: 1;
  •         transform: rotateY(180deg);
  •         background: url("images/card-front.jpg") no-repeat;
  •     }
  •     .back {
  •         z-index: 2; /* back side, placed above front */
  •         transform: rotateY(0deg);
  •         background: url("images/card-back.jpg") no-repeat;
  •     }
  • </style>
  • </head>
  • <body>
  •     <div class="flip-container">
  •         <div class="card">
  •             <div class="front">
  •                 <!-- front side content -->
  •             </div>
  •             <div class="back">
  •                 <!-- back side content -->
  •             </div>
  •         </div>
  •     </div>
  • </body>
  • </html>

You can also use two different <img> elements to display front and back side of the card instead of using them in the background, but you may feel some jerk at the beginning of the flip, because the image will take some time to load on the page. See example.

 

Note:Just replace the transform-function rotateY() with the rotateX() to create vertical flipping. You can also place the text or other elements inside the .front and .back <div> container to cutomize this example according to your need.


3D Flipping in Internet Explorer

The above will not work in Internet Explorer as it should be, due to the lack of support for the CSS3 transform properties. However, flipping both the front and back elements at the same time, we can achieve the same effect as previous example.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>CSS 3D Revolving in IE</title>
  • <style type="text/css">
  •     .flip-container {
  •         margin: 50px;
  •         perspective: 1000;
  •         display: inline-block;
  •     }
  •     .flip-container:hover .back {
  •         transform: rotateY(180deg);
  •     }
  •     .flip-container:hover .front {
  •         transform: rotateY(0deg);
  •     }
  •     .flip-container, .front, .back {
  •         width: 130px;
  •         height: 195px;
  •     }
  •     .card {
  •         transition: 0.6s;
  •         transform-style: preserve-3d;
  •         position: relative;
  •     }
  •     .front, .back {
  •         position: absolute;
  •         backface-visibility: hidden;
  •         transition: 0.6s;
  •         transform-style: preserve-3d;
  •     }
  •     .front {
  •         z-index: 1;
  •         transform: rotateY(-180deg);
  •         background: url("images/card-front.jpg") no-repeat;
  •     }
  •     .back {
  •         z-index: 2;
  •         transform: rotateY(0deg);
  •         background: url("images/card-back.jpg") no-repeat;
  •     }
  • </style>
  • </head>
  • <body>
  •    <div class="flip-container">
  •     <div class="card">
  •         <div class="front">
  •             <!-- front content -->
  •         </div>
  •         <div class="back">
  •             <!-- back content -->
  •         </div>
  •     </div>
  • </div>
  • </body>
  • </html>

The above example will work in IE10 and above.


Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.