Flip 3D Boxes and Cards Animation CSS Tutorial
In this exercise you can learn to create an animated flipping effect in 3D space using CSS which allows more content to be displayed on the front and back sides of any elements when the user interacts with them. It is a creative way to deliver more content to your users, make flip animations for card games, show recipes on the back of food photos. You could use it for your portfolio pieces. The ways you could use it are only limited by your imagination. There are also important homework assignment details at the end of the video lesson.
The following code uses the standardized syntax only. Reference the code in the box below to see -webkit- prefix applied.
<!DOCTYPE html>
<html>
<head>
<style>
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip3D > .back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
transform: perspective( 600px ) rotateY( 0deg );
}
</style>
</head>
<body>
<div class="flip3D">
<div class="back">Box 1 - Back</div>
<div class="front">Box 1 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 2 - Back</div>
<div class="front">Box 2 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 3 - Back</div>
<div class="front">Box 3 - Front</div>
</div>
</body>
</html>
This next example applies the -webkit- prefix for making the animation work in Chrome, Safari and other browser software that uses the webkit engine. Older versions of Internet Explorer may require the -ms- prefix but IE10 uses the standard syntax like Firefox.
<!DOCTYPE html>
<html>
<head>
<style>
.flip3D{ width:240px; height:200px; margin:10px; float:left; }
.flip3D > .front{
position:absolute;
-webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D > .back{
position:absolute;
-webkit-transform: perspective( 600px ) rotateY( 180deg );
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
}
.flip3D:hover > .front{
-webkit-transform: perspective( 600px ) rotateY( -180deg );
transform: perspective( 600px ) rotateY( -180deg );
}
.flip3D:hover > .back{
-webkit-transform: perspective( 600px ) rotateY( 0deg );
transform: perspective( 600px ) rotateY( 0deg );
}
</style>
</head>
<body>
<div class="flip3D">
<div class="back">Box 1 - Back</div>
<div class="front">Box 1 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 2 - Back</div>
<div class="front">Box 2 - Front</div>
</div>
<div class="flip3D">
<div class="back">Box 3 - Back</div>
<div class="front">Box 3 - Front</div>
</div>
</body>
</html>