title: CSS3 transitions and z-index
body: <p>I'm working on my project but I have got problems with z-index in css.
  I have googled all day but haven't found solution witch works out for me.
  Problem is, that i getting div under another div. It must be something with z-index. Hopefully someone can find out what i'm doing wrong...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".box").click(function() {
    $(this).css({
      "-webkit-transform-style": "preserve-3d",
      "background-color": "red",
      "box-shadow": "0px 0px 10px red",
      "-webkit-transition:": "all .2s ease-in",
      "zoom": "1",
      "z-index": "10",
      "-webkit-transform": "rotateY(0deg)"
    });
  
    $(this).mouseleave(function() {
      $(this).css({
        "-webkit-transform-style": "preserve-3d",
        "background-color": "blue",
        "box-shadow": "",
        "-webkit-transition:": "all .2s ease-out",
        "zoom": "",
        "z-index": "1",
        "-webkit-transform": "rotateY(45deg)"
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#blue {
    -webkit-perspective: 600px;
  }
  #blue .box {
    position: absolute;
    zoom: 0.7;
    background-color: blue;
    -webkit-transform: rotateY(45deg);
    -webkit-transition: all .2s ease-out;
    z-index: 0;
    height: 100px;
    width: 200px;
    margin-left: 50px;
    margin-top: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="blue" class="container" style="margin-left: 50px"&gt;
    &lt;div class="box" id="first"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="blue" class="container" style="margin-left: 200px"&gt;
    &lt;div class="box" id="second"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>I have also putted all together in <a href="http://jsfiddle.net/aPKh6/" rel="nofollow">jsFiddle</a></strong></p>