Flip Me

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; }
JAVASCRIPT
Expand for more options Login