Démonstration d'importance de l'ordre des transformations CSS

HTML

<div id="test1"></div>
<div id="test2"></div>

CSS

#test1
{
    width: 100px;
    height: 100px;
    background-color: red;
    
    -webkit-transform: rotate(30deg) skew(45deg);
       -moz-transform: rotate(30deg) skew(45deg);
        -ms-transform: rotate(30deg) skew(45deg);
         -o-transform: rotate(45deg) skew(45deg);
          o-transform: rotate(45deg) skew(45deg);
}
#test2
{
    width: 100px;
    height: 100px;
    background-color: green;
    
    -webkit-transform: skew(45deg) rotate(45deg);
       -moz-transform: skew(45deg) rotate(45deg);
        -ms-transform: skew(45deg) rotate(45deg);
         -o-transform: skew(45deg) rotate(45deg);
          o-transform: skew(45deg) rotate(45deg);
}
div
{
    position: absolute;
    left: 50%;
    top: 50%;
    margin : -50px 0 0 -50px
}