CSS Exercise 02 : Transforms

HTML

<div class="cube">
    <div class="top">
        <div class="face"></div>
    </div>
    <div class="left face"></div>
    <div class="right face"></div>
</div>

CSS

.cube { position:absolute; 
}
.face { width:120px; height:120px; padding:5px; 
}
.left { background-color:rgba(255,0,0,.5);    
}

.right { background-color:rgba(0,255,0,.5, left: 10px); 
    -webkit-transform:rotate(-10deg)  skew(0, 60deg); 
}

.top .face { background-color:rgba(0,0,255,.5); 
    -webkit-transform:rotate(180deg)  skew(10deg, 10deg)
    top: 100px,;
}

.top,.right,.left {position:absolute;}

.right {right: 130px;-webkit-transform:skew(0deg, -30deg);}
.top {top: -100px, left: 65px; 130px;-webkit-transform:skew(0deg, -30deg); } 
.left {-webkit-transform:skew(0deg, 
        30deg);}
.top . face {-webkit-transform:skew(0, -30deg) scale (1.1.
}