How to create a flip effect with CSS3 transforms

Dec 30, 2013
CSS
By

Over the last couple of years CSS has evolved more than we could ever imagined. Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones.

With transforms we can move elements through a 3D world, and today I’ll demonstrate this by creating a flip effect.

Browser support

The browser support for 3D transforms is a little lacking, but on the whole not too bad. It’s supported by all webkit browsers using the webkit prefix, by Firefox using the prefix free version, and it’s even partially supported by IE10 (IE10 doesn’t support the preserve-3d property that allows us to nest elements).

When it comes to mobile, IE Mobile has the same problem as IE10 and Opera mini doesn’t support it. Everything else works as you’d hope.

Creating our effect

In order to create this effect we will start by typing out some very simple HTML, I just created a section that holds both a div for the front and one for the back of our flip effect. Then I’ve added a title and an image to both divs:

<section>
<div class="front">
<h1>My Cat</h1>
<img src="http://placekitten.com/200/300">
</div>
<div class="back">
<h1>My other Cat</h1>
<img src="http://placekitten.com/g/200/300">
</div>
</section>

Next, let’s set up some CSS for our images and titles:

img {
border-radius: 10px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
}
h1 {
color: #1C1C1C;
font-family: 'Pacifico', arial;
font-weight: bold;
font-size: 24px;
text-align: center;
}

Next, we’ll add some styles to control the 3D aspect of our effect:

section{
width: 200px;
height: 300px;
margin-left: 300px;
margin-top: 200px;
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.5s;
perspective: 500;
transform-style: preserve-3d;
transition: transform 1.5s;
}

First we set the width and height. Then some margins. Next we set the perspective to 500 (which determines how far the element is from the screen). Next we preserve the 3D so that child elements inherit the 3D. Lastly we set a transition, so the change will take place over 1.5 seconds.

Now we need to se the backface-visibility property so that the div that should be hidden from view doesn’t overlap the div we should be able to see:

div {
display: block;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

Lastly, we need to set the back div to be flipped from the start, so that when we flip the element 180 degrees on hover, the back div will rotate into view:

.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

With all that done, we just need to rotate the whole element 180 degrees when ever it’s rolled over:

section:hover {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

The entire CSS is as follows:

img {
border-radius: 10px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
}
h1 {
color: #1C1C1C;
font-family: 'Pacifico', arial;
font-weight: bold;
font-size: 24px;
text-align: center;
}
section{
width: 200px;
height: 300px;
margin-left: 300px;
margin-top: 200px;
-webkit-perspective: 500;
perspective: 500;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1.5s;
transition: transform 1.5s;
}
div {
display: block;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
section:hover {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

And you can check out the demo here.

As you can see, using only CSS we were able to create a pretty sweet effect. This is just the beginning of CSS3 3D transforms, study these properties and you’ll be able to create some even more amazing effects.

Author: Sara Vieira
Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.