Make Flip Animation use CSS3 and jQuery

Membuat Flip Animation dengan kode CSS3 dan script jQuery

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<div class="click section">
<div class="front">
<div class="area-code muka"></div>
</div>
<div class="back">
<div class="muka">
<textarea readonly="readonly" class="code">
background: -webkit-linear-gradient(#3498db, #E0F8D8);
background: -o-linear-gradient(#3498db, #E0F8D8);
background: -moz-linear-gradient(#3498db, #E0F8D8);
background: linear-gradient(#3498db, #E0F8D8);
background: -webkit-linear-gradient(#3498db, #E0F8D8);
background: -o-linear-gradient(#3498db, #E0F8D8);
background: -moz-linear-gradient(#3498db, #E0F8D8);
background: linear-gradient(#3498db, #E0F8D8);
background: -webkit-linear-gradient(#3498db, #E0F8D8);
background: -o-linear-gradient(#3498db, #E0F8D8);
background: -moz-linear-gradient(#3498db, #E0F8D8);
background: linear-gradient(#3498db, #E0F8D8);
background: -webkit-linear-gradient(#3498db, #E0F8D8);
background: -o-linear-gradient(#3498db, #E0F8D8);
background: -moz-linear-gradient(#3498db, #E0F8D8);
background: linear-gradient(#3498db, #E0F8D8);
background: -webkit-linear-gradient(#3498db, #E0F8D8);
background: -o-linear-gradient(#3498db, #E0F8D8);
background: -moz-linear-gradient(#3498db, #E0F8D8);
background: linear-gradient(#3498db, #E0F8D8);
</textarea>
</div>
</div>
</div>
      <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2014/04/menu-of-tutorial-now-css-and-jquery.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://undercover-blogger.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}

.area-code {
  width: 800px;
  height: 300px;
  display: block;
  margin: 0 auto;  
}
.code {
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  resize: none;
  height: 300px;
  outline: none;
  overflow: auto;
  cursor: pointer;
  font-size: 15px;
  background: #EAEBE6;
  font-family: "Courier New",Courier,monospace;
}
.muka {
  cursor: help;
  background: #333 url(http://1.bp.blogspot.com/-b0aj7YLKUkM/UN3-vdIVadI/AAAAAAAAAbQ/9hRVmsEzU7o/s800/Matrix.jpg) no-repeat center center;
}
.section {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}
.section .front {
  position: absolute;
  top: 0;
  z-index: 900;
  width: 100%;
  height: 300px;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform-style:...

JavaScript

$(document).ready(function(){
  $('.click').click(function(){
    $('.flip').not(this).removeClass('flip');
      $(this).toggleClass('flip');
  });
});
$(".code").mouseover(function(){
  $(this).select();
});