CSS3 Cube

A CSS cube using 3D translations and rotations.

by davidpauljunior

HTML

<section class="container">
    <div id="cube">
        <figure class="front">1</figure>
       
    </div>
</section>

SCSS

body {
    margin: 0;
    font-family: sans-serif;
}

.container {
    width: 200px;
    height: 200px;
    position: relative;
    perspective: 1000px;
    #cube {
        width: 100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
        figure {
            width: 196px;
            height: 196px;
            display: block;
            position: absolute;
            border: 1px solid black;
            line-height: 196px;
            font-size: 120px;
            font-weight: bold;
            color: white;
            text-align: center;
            margin: 0;
            /* Colors */
            &.front {
                /* Note - Hue is 0 - 360 (starting and ending at red).  So this is red, 100% saturation, 50% lightness */
                background: hsla( 0, 100%, 50%, 0.7 );
                border-color: hsla(0, 100%, 40%, 0.7);
            }
        }
    }
}