jQuery Animate Transform Rotate

HTML

<div id="foo" class="divbutton"><img src="http://vignette4.wikia.nocookie.net/kirby/images/0/01/KDCol_Kirby_K64.png/revision/latest?cb=20120627075127&path-prefix=en" alt="weee" />
<button type="button" onclick="rotateFoo()">rotate</button>
</div>

CSS

body {
  font-family: sans-serif;
}

#foo {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 20px;
  left: 20px;
  border-spacing: 0;
  background: none;
  transition: all 1s ease;
}

button {
  display: none;
}

#foo img {
  width: 100%;
}

JavaScript

function rotateFoo() {
  var angle = ($('#foo').data('angle') + 1080) || 1080;
  $('#foo').css({
    'transform': 'rotate(' + angle + 'deg)'
  });
  $('#foo').data('angle', angle);
}
$(document).ready(function() {
  $(document).on('mouseenter', '.divbutton', function() {
    $(this).find(":button").show();
  }).on('mouseleave', '.divbutton', function() {
    $(this).find(":button").hide();
  });
});