CSS Exercise 02 : Transforms : Answer

by richardneililagan

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:fixed; top:40%; left:20%; }
.face { width:120px; height:120px; padding:5px; }
.left { background-color:rgba(255,0,0,.5); -moz-transform:skew(0,30deg); top:0; left:0; }
.right { background-color:rgba(0,255,0,.5); -moz-transform:skew(0,-30deg); left:130px; top:0; }
.top { -moz-transform:rotate(60deg); top:-103px; left:65px; }
.top .face { background-color:rgba(0,0,255,.5); -moz-transform:skew(0,-30deg) scale(1, 1.16); }
.left, .right, .top { position:absolute; }

.cube div { -moz-transition:all 1s ease-in-out; }

.cube:hover .top {
    top:-153px;
}
.cube:hover .left {
    top:30px;
    left:-40px;
}
.cube:hover .right {
    top:30px;
    left:180px;
}