title: transform translate rotate order
body: <p>I was working on a project making 3D cubes. I spent hours looking for mistake in CSS. I was not able to find any. Then I started fiddling with the code. To my amusement if I am using translate before rotate in transform like
  <code>transform: translateX(value px) rotateY(value deg);</code>
  the result will be a broken cube. It is only effecting top, right and left sides of the cube.
  While there is a reverse effect on bottom and back sides of the cube i.e. <code>transform: rotateX(vlaue deg) translateY(value px);</code> is giving me collapsed back and bottom. Here is the <a href="https://jsfiddle.net/6n3tbkf1/" rel="nofollow noreferrer" title="JSFiddle">JSFiddle</a>. </p>