Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

CSS Videos

Animation Rigging

Holiday Christmas Lights Animation Tutorial CSS JavaScriptParallax Effect Animation Multiple Background CSS TutorialBackground Position keyframes Animation CSS TutorialFolding Content Nav Menu CSS3 Animation JavaScript TutorialPure CSS Animated Menu Button Transitionskeyframes Animation Tutorial Floating ElementsAnimated Repeating Tile Background keyframes TutorialFlip 3D Boxes and Cards Animation CSS TutorialFlash and Pulse Effects keyframes Animation TutorialImage Zoom Effect Animation CSS3 HTML Tutorial