rotate and flip y

by Jerimy Brown

HTML

<div class='crossRotate'>
  <img class='rotateIt' src="http://lorempixel.com/200/200/" alt="" />
</div>

<div class='crossFlip flipIt' style="text-align: center">
  <img src="http://lorempixel.com/200/200/" alt="" /><br>
  test
</div>

CSS

.rotateIt {
  cursor: hand;
  display: block;
  margin: 20px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}

.flipIt {
  cursor: hand;
  display: block;
  position: absolute;
  margin: 20px;
  top: 400;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
}

JavaScript

$(".crossRotate").click(function() {
  if ($(".rotateIt").css("transform") == 'none') {
    $(".rotateIt").css("transform", "rotate(90deg)");
  } else {
    $(".rotateIt").css("transform", "");
  }
});

$(".crossFlip").click(function() {
  if ($(this).css("transform") == 'none') {
    $(this).css("transform", "rotatey(-180deg)");
  } else {
    $(this).css("transform", "");
  }
});