By: Chad Bell
Create modern engaging website designs using CSS3’s 3D transform properties. This is tutorial explaining how to create a convincing 3D card flip animation. You can display any HTML on either side of the card. Our example is from a portfolio page. The front of the card displays a screen cap of one of our websites, while hovering over the image will cause the card to flip around, revealing the title of the project, as well as a short description and a button to view the full project page.

Example: Hover over the image to view the animation.

A note on browser support: Most modern browsers will support this effect. However, there are issues with IE10 and below. Take that into consideration and prepare a fallback plan for IE.

Our box will consist of 4 main elements. The main containing div .project_container, the item div .item, which will house the two sides of the card, and nested inside, the front .card and the back .card.back.

The HTML:
[html theme=”” group=”” tab=”” highlight=””]

[/html]

Next, we’ll apply our structural and aesthetic styles.
[css theme=”” group=”” tab=”” highlight=””]

/* Make sure the image doesn’t overflow the div */
img { max-width: 100%; }

.project_container {
max-width: 337px;
height: 195px;
}

.item {
max-width: 337px;
height: 195px;
display: block;
}

.card {
position: absolute;
max-width: 337px;
height: 195px;
display: table;
}

.card.back {
background-image: url(‘img/Paris_Apt.jpg’);
background-size: cover;
}

.text_holder {
padding: 25px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.overlay {
background: rgba(0,0,0,0.6);
max-width: 337px;
height: 195px;
position:absolute;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

h2 {
font-size: 19px;
margin: 0;
text-transform: uppercase;
}

h2 a {
color: #fff;
}

h1 a:hover {
color: #2B905B;
}

.project_container p {
font-size: 15px;
color: #bababa;
margin-top: 5px;
}

a {
text-decoration: none;
transition: all .2s linear;
}

a:hover {
transition: all .2s linear;
}

a.link {
color: #fff;
padding: 8px 24px;
border: 1px solid #FFF;
display: inline-block;
font-size: 13px;
position: absolute;
left: 25px;
bottom: 25px;
}

a.link:hover {
color: #000;
background-color: #fff;
}
[/css]

Now, for the fun part. We’ll use 4 css properties to create the the 3d effect.

We’ll start by declaring the perspective property on the main container .project_container. This property defines the depth of the element on the 3D plane. This describes how far away the element appears from the viewer’s eyes.

Next, we’ll use a transform style of preserve-3d on the main item div .item. This forces the element to preserve it’s position in 3D space while transforming.

On the .card element (which will affect both sides of the card), we set backface-visibility to hidden. This will ensure that the opposite side of the card is always hidden.

By default, we need to set the state of the backside of the card to face away from the viewer, we can accomplish this by declaring a transform of rotateY(180deg) to the .side.back element. With the backface-visibility set to hidden, this will effectively hide the backside from view until we preform the flip. We then declare a hover event on the main container .project_container to flip the item div by repeating a transform of rotateY(180deg), this will flip the card around 180 degrees on hover, allowing us to see the backside while hiding the front.

Lastly, we’ll apply some basic transitions so that the the 3D transform will animate from one state to the next. We’ve also animated the bottom property of our button so it rises into the element on hover, adding a little more visual interest. A delay was added to the bottom animation so it doesn’t start animating until the card is partially rotated.

[css theme=”” group=”” tab=”” highlight=””]
.project_container {
perspective: 1000px;
}

.item {
transform-style: preserve-3d;
transition: all .3s linear;
}

.project_container:hover .item {
transform: rotateY(180deg);
}

.card {
backface-visibility: hidden;
}

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

a {
transition: all .2s linear;
}

a:hover {
transition: all .2s linear;
}

a.link {
transition: bottom .15s ease-in-out, opacity .2s linear, background-color .2s linear;
opacity: 0;
}

.project_container:hover a.link {
bottom: 40px;
transition: bottom .1s ease-in-out .2s, opacity .2s linear, background-color .2s linear;
opacity: 1;
}
[/css]

This effect has pretty good support. All modern browsers will support it, with the exception of IE10.

Here’s the finished code with properties added for maximum browser compatibility:

[css theme=”” group=”” tab=”” highlight=””]
img { max-width: 100%; }

.project_container {
-o-perspective: 1000px;
-moz-perspective: 1000px;
-webkit-perspective: 1000px;
perspective: 1000px;
position: relative;
z-index: 1;
max-width: 337px;
height: 195px;
}

.item {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all .3s linear;
display: block;
}

.project_container:hover .item {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.card {
position: absolute;
max-width: 337px;
height: 195px;
display: table;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}

.card.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
text-align: left;
display: table;
background-image: url(‘img/Paris_Apt.jpg’);
background-size: cover;
}

.text_holder {
padding: 25px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.overlay {
background: rgba(0,0,0,0.6);
max-width: 337px;
height: 195px;
position:absolute;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

h1 {
font-size: 19px;
margin: 0;
text-transform: uppercase;
}

h1 a {
color: #fff;
}

h1 a:hover {
color: #2B905B;
}

.project_container p {
font-size: 15px;
color: #bababa;
margin-top: 5px;
}

a {
text-decoration: none;
transition: all .2s linear;
}

a:hover {
transition: all .2s linear;
}

a.link {
color: #fff;
padding: 8px 24px;
border: 1px solid #FFF;
display: inline-block;
font-size: 13px;
position: absolute;
left: 25px;
bottom: 25px;
transition: bottom .15s ease-in-out, opacity .2s linear, background-color .2s linear;
opacity: 0;
}

a.link:hover {
color: #000;
background-color: #fff;
}

.project_container:hover a.link {
bottom: 40px;
transition: bottom .1s ease-in-out .2s, opacity .2s linear, background-color .2s linear;
opacity: 1;
}
[/css]

If you didn’t get your fix from our article the Mozilla Developer Network has more information about using CSS3 transitions. Between working on client projects we are trying to find the IE 10 fix. Feel free to let us know if you find a solution to get IE to play nice with CSS3.