CSS3 Visiting Card 3D Transform

My friend Asif made a nice design on visiting card, so I decided to convert that into a 3D flipping Visiting Card



To rotate a div with 3D transform :-

• transform-style: preserve-3d;


• perspective: 800px;


• transform: rotateY(180deg);


• backface-visibility: hidden;

After setting the above CSS a div will transform.

---

Final Product

---

So lets start

---

[html]
<div id="card">
<div class="front">
<div class="strips">
<p class="strip red"></p>
<p class="strip orange"></p>
<p class="strip green"></p>
<p class="strip blue"></p>
<p class="strip lOrange"></p>
</div>
<div class="businessName">
Webs Tutorial
</div>
</div>
<div class="back">
<div class="strips">
<p class="strip red"><span>www.webstutorial.com</span></p>
<p class="strip orange"><span>Mumbai, India</span></p>
<p class="strip green"></p>
<p class="strip blue"><span>PHP, HTML5, CSS3</span></p>
<p class="strip lOrange"><span>niraj@webstutorial.com</span></p>
</div>
<div class="myName">
<p>Niraj Chauhan</p>
Developer
</div>
</div>
</div>
[/html]

---

Above we made a parent div and inside that two divs, one will be the front side and another will be the backside. When we :hover on the front facing div, it rotates in Y axis. As we have set the transform style to preserve-3d it will maintain its view and the transform will be displayed in 3D.

---

[css]
@font-face {
font-family: roboto;
src: url('../Roboto-Regular.ttf');
}

* {
font-family: roboto !important;
}

.container {
position: relative;
}

#card {
position: absolute;
z-index: 11;
-webkit-perspective: 800px;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
left: 30%;
}

#card .front,#card .back {
background: #000;
width: 480px;
height: 205px;
display: block;
position: absolute;
color: #fff;
border-radius: 8px;

-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
-ms-transition: -ms-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}

#card .front {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 13;
}

#card:hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}

#card .back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 12;
background: #000;
}

#card:hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 14;
}

/* Front Strips */
.strips {
clear: both;
margin: 0 auto;
position: relative;
width: 125px;
}

.strip {
float: left;
height: 140px;
margin-right: 12px;
position: relative;
width: 12px;
font-family: roboto;
}

.red {
background: #b70000;
color: #b70000;
border: 1px solid #890000;
border-top: 0px;
}

.orange {
background: #f25d07;
color: #f25d07;
border: 1px solid #b64605;
border-top: 0px;
}

.green {
background: #a69e33;
color: #a69e33;
border: 1px solid #837726;
border-top: 0px;
}

.blue {
background: #0092b2;
color: #0092b2;
border: 1px solid #006e86;
border-top: 0px;
}

.lOrange {
background: #ee913f;
color: #ee913f;
margin: 0 !important;
border: 1px solid #b36d2f;
border-top: 0px;
}

.businessName {
clear: both;
font-family: roboto;
font-size: 22px;
padding: 5px 0 0;
text-align: center;
}

/* Back strips */
.back .red {
height: 70px;
}

.back .orange {
height: 100px;
}

.back .green {
height: 140px;
}

.back .blue {
height: 100px;
}

.back .lOrange {
height: 70px;
}

.strip span {
position: absolute;
font-size: 15px;
}

.red span {
left: -162px;
top: 50px;
}

.orange span {
left: -102px;
top: 80px;
width: 100px;
}

.green span {
left: 0;
}

.blue span {
left: 20px;
top: 80px;
width: 140px;
}

.lOrange span {
left: 18px;
top: 50px;
}

.myName {
clear: both;
color: #999999;
font-family: roboto;
font-size: 20px;
padding: 0;
text-align: center;
}

.myName p {
color: #a69e33;
}

#designedBy {
border-radius: 5px 0 0 0;
bottom: 0;
color: #FFFFFF;
min-height: 10px !important;
padding: 10px;
position: fixed;
right: 0;
}
[/css]

---

Now in CSS we set the backface-visibility: hidden;. With this property the backside of the card will be hidden. When we hover on the front face of the card with the help of css transition we flip the card and now the backside of the card will be visible.

When we move away over mouse from the card it turns back to its original position.This way a 3D flip can be done using CSS3.

Now the latest Firefox also supports the 3D Transform. Previously it was only working on webkit browsers