jQuery Animate Transform Rotate

HTML

<section class="wrapper">
<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>

<div class="foo">4</div>
<div class="foo">5</div>
<div class="foo">6</div>

<div class="foo">7</div>
<div class="foo">8</div>
<div class="foo">9</div>
</section>

<p>
</p>

CSS

body {
    font-family: sans-serif;
}

button {
  width: 180px;
  height: 80px;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
}

.wrapper {
  width: 306px;
  border: 3px solid black;
  margin: 50px auto 0;
  overflow: hidden;
}

.foo {
    width:100px;
    height:70px;
    background-color:#faa;
    transition: all .5s ease;
    float: left;
    cursor: pointer;
    text-align: center;
    padding-top: 30px;
    border: 1px solid #fff;
}

JavaScript

function rotateFoo(current){
		
    var angle = (current.data('angle') + 90);
    current.data('angle', angle);
    console.log('angle: ', angle);
    current.css({'transform': 'rotate(' + angle + 'deg)'});
    
    current.data('angle1', angle);
}

$(document).ready(function(){
	  
    function generateNumb() {
    var start = [0, 90, 180, 270];
    	var start = start[Math.floor(Math.random() * 4)];
      
      return start;
    }
  	
  $('.foo').each(function(){
		$(this).css({'transform': 'rotate(' + generateNumb() + 'deg)'});
  });
  
  $('.foo').on('click', function(){
    rotateFoo($(this));
  });
  
});