html tutorial - How to create 3D flipping effect on mouse hover using CSS - html5 - html code - html form
Answer: Use the CSS backface-visibility property
You can use the CSS backface-visibility property together with the remodel functions to make beautiful flipping and revolving impact while not victimization any JavaScript.
In the following example there are 2 pictures, one is front side and alternative is back side of the pocker card, wherever back side is placed over the front side victimization the CSS positioning technique, so at the start only 1 side of the card is visible.
When you place the pointer over the back side of the card image it revolves and front side of the card are displayed. The backface-visibility of each the front and back components are hidden in order that the back side of the flipped components doesn't show throughout the transformation, that produce the illusion of 3D rotation.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 3D Rotation on Mouseover</title>
<style type="text/css">
.flip-container {
margin: 30px;
perspective: 1000;
display: inline-block;
}
.flip-container:hover .card {
transform: rotateY(180deg);
}
.card, .front, .back {
width: 150px;
height: 215px;
}
.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 additionally use 2 completely different <img> components to show front and back side of the card rather than victimisation them within the background, however you'll feel some jerk at the start of the flip, as a result of the image can take your time to load on the page. See example.
3D Flipping in Internet Explorer
The above won't work in web explorer because it should be, because of the lack of support for the CSS3 remodel properties. However, flipping each the front and back components at a similar time, we are able to succeed the same effect as previous example.
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: 150px;
height: 215px;
}
.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.