This is what I'm trying to do: (look at the bottom)

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>
<script language="JavaScript" type="text/javascript" 
  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] });
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?