HTML
<div class="flip3d margin_flip">
<div class="back">
<p>My Technical Skills</p>
<ol>
<li>HTML, CSS, CSS Frameworks</li>
<li>XML, JSON</li>
<li>JavaScript, JQuery</li>
<li>PHP, PHP Frameworks</li>
<li>ASP.Net</li>
<li>MySQL</li>
</ol>
</div>
<div class="front">
<p>WHO AM I</p>
<span class="myname">Karl Tanjuan</span>
<p class="what">Web Developer</p>
</div>
</div>
CSS
body{
padding:0;
margin-left:40%;
margin-top:10%;
background:-webkit-linear-gradient(left, #888,#ddd);
}
.flip3d{
position:relative;
width:224px;
height:224px;
}
.flip3d > .front{
position:absolute;
width:224px;
height:224px;
background:#123;
color:#fff;
border:1px solid black;
box-shadow:0px 2px 3px rgba(0,0,0,0.7);
border-radius:7px;
overflow:hidden;
transform:rotateY(0deg);
transition:transform .5s ease-in-out .2s;
backface-visibility:hidden;
perspective:600px;
-webkit-transform:rotateY(0deg);
-webkit-transition:-webkit-transform .5s ease-in-out .2s;
-webkit-backface-visibility:hidden;
-webkit-perspective:600px;
}
.myname{
font-size:20px;
margin-left:55px;
}
.what{
margin-left:55px;
}
.flip3d > .back{
position:absolute;
width:224px;
height:224px;
background:#123;
color:#fff;
border:1px solid black;
box-shadow:0px 2px 3px rgba(0,0,0,0.7);
border-radius:7px;
box-shadow:inset 0px 255px 0px rgba(255,255,255,0.7);
-webkit-box-shadow:inset 0px 255px 0px rgba(255,255,255,0.7);
overflow:hidden;
transform:rotateY(-179deg);
transition:transform .5s ease-in-out .2s;
backface-visibility:hidden;
perspective:600px;
-webkit-transform:rotateY(-179deg);
-webkit-transition:-webkit-transform .5s ease-in-out .2s;
-webkit-backface-visibility:hidden;
-webkit-perspective:600px;
}
.flip3d:hover > .front{
transform:rotateY(-180deg);
perspective:600px;
-webkit-transform:rotateY(-180deg);
-webkit-perspective:600px;
}
.flip3d:hover > .back{
transform:rotateY(0deg);
perspective:600px;
-webkit-transform:rotateY(0deg);
-webkit-perspective:600px;
}
.flip3d > .front > p:first-child {
color:#fff;
text-align:center;
padding:4px;
transform:rotate(-45deg);
background:rgba(204,51,51,0.6);
margin-left:-140px;
margin-top:25px;
}
.flip3d > .back > p {
font-weight:bold;
font-size:16px;
margin-left:10px;
margin-top:10px;
}
