Animation How to - Click to flip image








Question

We would like to know how to click to flip image.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.info, .image {<!--from  www.  ja va2 s .c  o  m-->
  position: absolute;
  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
}

.info {
  padding: 10px;
  width: 160px;
  height: 160px;
  z-index: -2;
  -webkit-transform: rotateY(180deg);
  background-color: rgba(255, 255, 255, 0.8);
}

.image {
  z-index: -1;
  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
  -webkit-transform: rotateY(0deg);
}

.rotator {
  width: 160px;
  height: 160px;
}

.rotator .info {
  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
  z-index: -1;
  -webkit-transform: rotateY(0deg);
}

.rotator  .image {
  -webkit-transform: rotateY(180deg);
  -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;;
  z-index: -2;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
    $(".cont").click(function(){
       $(this).toggleClass("rotator")  ; 
    })
});
</script>
</head>
<body>
  <div class="cont">
    <img class="image"
      src="http://www.java2s.com/style/download.png">
    <div class="info">Click here to flip</div>
  </div>
</body>
</html>

The code above is rendered as follows: