CSS3 Flash Card Demo

  • follow us in feedly
Published April 23, 2013 by Brad Knutson
CSS3 Flash Card

A flash card flipping back and forth is something that once required complex Flash to accomplish. If you didn’t have a Flash programmer on your staff, you had to farm this portion of the project out to an agency that specialized in it.

As we know, ever since Apple stopped supporting Flash in it’s mobile devices, the world has shifted away from Flash and towards HTML5, CSS3 and Javascript. Today, flipping a flash card can be accomplished with Javascript and/or CSS3. In this article, I’ll focus on the CSS3 version.

So how do we go about implementing a CSS3 flash card animation? Let’s first look at the HTML structure we will require.

HTML


<div class="flip-card">
<div class="flip-front"></div>
<div class="flip-back"></div>
</div>

It’s pretty simple. A container surrounding two divs – one for the front of the flash card, and one for the back. Inside these divs we can put essentially whatever we want. For example, perhaps a German teacher wants the front of the card to show an image, and the back to show a word describing the image in German.

Now that we have the structure down, let’s look at some CSS that I’ve come up with to accomplish the animation. The basis of the CSS3 flip animation is included in my CSS, however you may want to modify the CSS to style the card to your liking.

CSS

.flip-card {
	height: <-- height of flash card -->;
	width: <-- width of flash card -->;
	transform: perspective(400px) rotateY(0deg);
	-moz-transform: perspective(400px) rotateY(0deg);
	-webkit-transform: perspective(400px) rotateY(0deg);
	-o-transform: perspective(400px) rotateY(0deg);
	-ms-transform: perspective(400px) rotateY(0deg);
	transition: all ease 0.2s;
	-moz-transition: all ease 0.2s;
	-webkit-transition: all ease 0.2s;
	-o-transition: all ease 0.2s;
	-ms-transition: all ease 0.2s;
}
.flip-card .flip-front {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.flip-card .flip-back {
	height: 100%;
	width: 100%;
}
.flip-card:hover {
	transform: perspective(400px) rotateY(180deg);
	-moz-transform: perspective(400px) rotateY(180deg);
	-webkit-transform: perspective(400px) rotateY(180deg);
	-o-transform: perspective(400px) rotateY(180deg);
	-ms-transform: perspective(400px) rotateY(180deg);
}
.flip-card:hover .flip-back {
	transform: perspective(400px) rotateY(-180deg);
	-moz-transform: perspective(400px) rotateY(-180deg);
	-webkit-transform: perspective(400px) rotateY(-180deg);
	-o-transform: perspective(400px) rotateY(-180deg);
	-ms-transform: perspective(400px) rotateY(-180deg);
}

The Result

Twitter

Follow me
@Bradsknutson

As you may notice, the animation isn’t perfect, and many browsers still need to work out a few kinks with CSS3 animations. Still though, it’s impressive that you can accomplish this complex of an animation with very little CSS (relatively speaking).

Browser Support

Sorry Opera users…

Do you have any tweaks to my CSS? Suggstions or comments? Hit up the comment form below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

3 thoughts on “CSS3 Flash Card Demo

  1. Joseph Lau

    If I want to use the above-method to create Q&A flash card in Drupal (e.g. the front is question with image/text and the back is answer with image/text).

    Thank you very much.

    Reply

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">