Q:

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

mhmadesk
Save to bookmark
|
2022-05-17
|
  715 
Easy
0

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

Css programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-17
need an explanation for this answer? contact us directly to get an explanation for this 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 poker card. The back side of the card 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 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. Let's try it out to understand how 3D flipping exactly works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS 3D Rotation Effect</title>
<style>
    .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("/examples/images/card-front.jpg") no-repeat;
    }
    .back {
        z-index: 2; /* back side, placed above front */
        transform: rotateY(0deg);
        background: url("/examples/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 example 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. This example will work in IE10 and above.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS 3D Rotation Effect</title>
<style>
    .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("/examples/images/card-front.jpg") no-repeat;
    }
    .back {
        z-index: 2;
        transform: rotateY(0deg);
        background: url("/examples/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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now