title: Why css rotate messes up child's skew
body: <p>take a look this is div without parent being rotated only skew and then child skewed back.</p>
  
  <p>child(redbox):
  <strong>skewed:</strong>-40deg</p>
  
  <p>parent: <strong>skewed:</strong> 40deg</p>
  
  <p>how it looks...</p>
  
  <p><img src="https://i.stack.imgur.com/3yj9R.jpg" alt="enter image description here"></p>
  
  <p>No if i only just rotate parent why does the red box gets messed up...</p>
  
  <p>child(redbox):
  <strong>skewed:</strong>-40deg</p>
  
  <p>parent: <strong>skewed:</strong> 40deg <strong>rotated:</strong> 40deg.</p>
  
  <p><img src="https://i.stack.imgur.com/0I7Uc.jpg" alt="enter image description here"></p>
  
  <p>so whyyyy does just rotating parent messes up the whole thing so confused.</p>
  
  <p><a href="http://codepen.io/anon/pen/IyBvt" rel="nofollow noreferrer">http://codepen.io/anon/pen/IyBvt</a></p>
  
  <p>i think skewed is getting applied after rotation or something</p>