This is what I'm trying to do: (look at the bottom)
http://louisremi.github.io/jquery.transform.js/

This is what I did:
HTML Code:
<div id="box">
  <div class="square">prvi</div>
  <div class="square">drugi</div>
  <div class="square" style="z-index: 2">treci</div>
  <div class="square">cetvrti</div>
</div>
 
 
<script language="JavaScript" type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
  var transforms = [
  'skewY(-45deg) scale(.66)',
  'translate(20px) skewY(-45deg) scale(.66)',
  'translate(150px,50px) scale(1.5,1)',
  'translate(280px) skewY(45deg) scale(.66)',
  'translate(300px) skewY(45deg) scale(.66)'
    ],
  $squares = $('#box .square').each(function(i) {
      $(this).css({ transform: transforms[i] });
    });
  $('#box').mouseenter(function() {
      $squares.each(function(i) {
        $(this).animate({ '-moz-transform': transforms[i+1] });
      });
    }).mouseleave(function() {
      $squares.each(function(i) {
        $(this).animate({ transform: transforms[i] });
      });
    });
</script>
HTML Code:
#box {
        width: 400px;
        height: 150px;
        position: relative;
}
 
.square {
        width: 100px;
        height: 100px;
        margin: 20px 0px;
        position: absolute;
}
/*just to see them*/
.square:nth-child(1) {
        background-color: #0c0;
}
.square:nth-child(2) {
        background-color: #0d0;
}
.square:nth-child(3) {
        background-color: #5a5;
}
.square:nth-child(4) {
        background-color: #087;
}
I found out that I can use jquery to make those changes, but not to animate it.
Is there someone here that can make this work?