How to create 3D flipping effect on mouse hover using CSS
Topic: HTML / CSSPrev|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 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 on Mouseover</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("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 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 Revolving in IE</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("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>Related FAQ
Here are some more FAQ related to this topic:
