3d cube

by Richard Hunter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<div class='foo'>
    <div class="container">
        <div class="alpha"></div>
        <div class="beta"></div>
        <div class="gamma"></div>
        <div class='delta'></div>
        <div class='epsilon'></div>
        <div class='fa'></div>
    </div>
</div>

SCSS

div {
    height: 150px;
    width: 150px;
}
.foo {
    border : solid 1px black;
    perspective: 500px;
    overflow : hidden;
    overflow-y : auto;
    background : #333;
    width : 500px;
    height : 300px;
    .container {
        margin : 100px;
        height : 500px;
        transform: rotateX(-20deg) rotateY(28deg);
        transform-style : preserve-3d;
        .alpha {
            transform-origin : left;
            transform: rotateY(90deg);
            background-color: blue;
        }
        .beta {
            background : green;
            transform-origin : right;
            transform : rotateY(-90deg);
        }
        .gamma {
            background : pink;
            transform-origin : left top;
            transform : rotateX(-90deg);
        }
        .delta {
            background : red;
            transform-origin : left bottom;
            transform : rotateX(90deg);
        }
        .epsilon {
            background : yellow;
            transform : translateZ(-150px);
        }
        .fa {
            background : #666;
            opacity : 0.5;
        }
    }
    .container > div {
        position : absolute;
        left : 0;
        top : 0;
    }
}