title: negative effect on opacity transition inside transformed element
body: <p>Please, try this in action. I change opacity on one element and this affects the look of another static element which contains text. It's hard to explain, just try and tell me how can I avoid this effect. It seems to me that this happens only when using chain of transforms.</p>
  
  <p><a href="http://jsfiddle.net/6p8jf3d3/" rel="nofollow">http://jsfiddle.net/6p8jf3d3/</a></p>
  
  <p>HTML:</p>
  
  <p><code>&lt;div class="outer"&gt;
          &lt;div class="inner"&gt;&lt;/div&gt;
          &lt;div class="text"&gt;Hello&lt;/div&gt;
      &lt;/div&gt;</code></p>
  
  <p>CSS: </p>
  
  <pre><code>div.outer {
      position: absolute;
      top: 100px;
      left: 50px;
      width: 200px;
      height: 100px;
      border: 1px solid black;
  
          -ms-transform: skew(-45deg);
      -webkit-transform: skew(-45deg);
              transform: skew(-45deg);
  }
  
  div.inner {
      width: 100%;
      height: 100%;
      background-color: #99CCFF;
      opacity: 0;
  
      -webkit-transition: all 0.5s;
              transition: all 0.5s;
  }
  
  div.text {
      position: absolute;
      top: 0;
      left: 0;  
      font-size: 2em;
      font-weight: bold;
  
          -ms-transform: skew(45deg);
      -webkit-transform: skew(45deg);
              transform: skew(45deg);
  }
  
  div.outer:hover div.inner {
      opacity: 1;
  }
  </code></pre>