CSS Isometric Layers

/**
 * CSS Isometric Layer Display
 *  written by Akoi Meexx - June 14th, 2011
 *
 * Source obvs. free for all. If you use this and like it, just hit me up on
 * twitter @akoimeexx. Everyone can always use a little ego boost.
 */

/**
 * CHANGELOG
 *
 *  August 4th, 2011
 *      Added fallback colors for browsers w/o rgba() support.
 *      Sorted transform rules to apply non-prefixed last.
 *      Removed overflow: hidden from the body class.
 *      Renamed the class to iso-metrics for the lulz.
 *      Added this changelog.
 *
 *  June 14th, 2011
 *      Initial project creation.
 */

/**
 * Apply our iso-metrics class to the body element to show a rough layout of our
 * DOM layers in isometric view. Float the body left to constrain the body
 * contents. Then rock it like it's hawt, rock it like it's hawt...
 */
body.iso-metrics {
    float: left !important;

        -moz-transform-origin: top right !important;
        -ms-transform-origin: top right !important;
        -o-transform-origin: top right !important;
        -webkit-transform-origin: top right !important;
    transform-origin: top right !important;
        -moz-transform: rotate(-45deg) skew(15deg, 15deg) !important;
        -ms-transform: rotate(-45deg) skew(15deg, 15deg) !important;
        -o-transform: rotate(-45deg) skew(15deg, 15deg) !important;
        -webkit-transform: rotate(-45deg) skew(15deg, 15deg) !important;
    transform: rotate(-45deg) skew(15deg, 15deg) !important;
}

/**
 * Set up us the borders, margins, padding, and take off every text to stay
 * inside their containers for great justice.
 */
.iso-metrics address, .iso-metrics article, .iso-metrics aside, .iso-metrics blockquote,
.iso-metrics canvas, .iso-metrics dl, .iso-metrics div, .iso-metrics embed,
.iso-metrics fieldset, .iso-metrics figure, .iso-metrics footer, .iso-metrics form,
.iso-metrics header, .iso-metrics map, .iso-metrics object, .iso-metrics ol,
.iso-metrics output, .iso-metrics p, .iso-metrics pre, .iso-metrics section,
.iso-metrics table, .iso-metrics ul, .iso-metrics video {
    border-bottom: 12px solid #c0c0c0 !important;
    border-left: 12px solid #d0d0d0 !important;
    border-right: 1px solid #a0a0a0 !important;
    border-top: 1px solid #b0b0b0 !important;
    border-bottom: 12px solid rgba(0, 0, 0, 0.10) !important;
    border-left: 12px solid rgba(0, 0, 0, 0.05) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.20) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.15) !important;

    margin-bottom: 8px !important;
    margin-left: 8px !important;
    margin-right: 2px !important;
    margin-top: 2px !important;

    padding: 2px !important;

    word-wrap: break-word !important;
}
    /**
     * Give our block-level elements basic rgb(a) coloring (red, green, blue)
     */
    /* Red */
    .iso-metrics address:nth-child(3n+1), .iso-metrics article:nth-child(3n+1),
    .iso-metrics aside:nth-child(3n+1), .iso-metrics blockquote:nth-child(3n+1),
    .iso-metrics canvas:nth-child(3n+1), .iso-metrics dl:nth-child(3n+1),
    .iso-metrics div:nth-child(3n+1), .iso-metrics embed:nth-child(3n+1),
    .iso-metrics fieldset:nth-child(3n+1), .iso-metrics figure:nth-child(3n+1),
    .iso-metrics footer:nth-child(3n+1), .iso-metrics form:nth-child(3n+1),
    .iso-metrics header:nth-child(3n+1), .iso-metrics map:nth-child(3n+1),
    .iso-metrics object:nth-child(3n+1), .iso-metrics ol:nth-child(3n+1),
    .iso-metrics output:nth-child(3n+1), .iso-metrics p:nth-child(3n+1),
    .iso-metrics pre:nth-child(3n+1), .iso-metrics section:nth-child(3n+1),
    .iso-metrics table:nth-child(3n+1), .iso-metrics ul:nth-child(3n+1),
    .iso-metrics video:nth-child(3n+1) {
        background-color: #ffd0d0 !important;
        background-color: rgba(255, 0, 0, 0.05) !important;
    }
    /* Green */
    .iso-metrics address:nth-child(3n+2), .iso-metrics article:nth-child(3n+2),
    .iso-metrics aside:nth-child(3n+2), .iso-metrics blockquote:nth-child(3n+2),
    .iso-metrics canvas:nth-child(3n+2), .iso-metrics dl:nth-child(3n+2),
    .iso-metrics div:nth-child(3n+2), .iso-metrics embed:nth-child(3n+2),
    .iso-metrics fieldset:nth-child(3n+2), .iso-metrics figure:nth-child(3n+2),
    .iso-metrics footer:nth-child(3n+2), .iso-metrics form:nth-child(3n+2),
    .iso-metrics header:nth-child(3n+2), .iso-metrics map:nth-child(3n+2),
    .iso-metrics object:nth-child(3n+2), .iso-metrics ol:nth-child(3n+2),
    .iso-metrics output:nth-child(3n+2), .iso-metrics p:nth-child(3n+2),
    .iso-metrics pre:nth-child(3n+2), .iso-metrics section:nth-child(3n+2),
    .iso-metrics table:nth-child(3n+2), .iso-metrics ul:nth-child(3n+2),
    .iso-metrics video:nth-child(3n+2) {
        background-color: #d0ffd0 !important;
        background-color: rgba(0, 255, 0, 0.05) !important;
    }
    /* Blue */
    .iso-metrics address:nth-child(3n+3), .iso-metrics article:nth-child(3n+3),
    .iso-metrics aside:nth-child(3n+3), .iso-metrics blockquote:nth-child(3n+3),
    .iso-metrics canvas:nth-child(3n+3), .iso-metrics dl:nth-child(3n+3),
    .iso-metrics div:nth-child(3n+3), .iso-metrics embed:nth-child(3n+3),
    .iso-metrics fieldset:nth-child(3n+3), .iso-metrics figure:nth-child(3n+3),
    .iso-metrics footer:nth-child(3n+3), .iso-metrics form:nth-child(3n+3),
    .iso-metrics header:nth-child(3n+3), .iso-metrics map:nth-child(3n+3),
    .iso-metrics object:nth-child(3n+3), .iso-metrics ol:nth-child(3n+3),
    .iso-metrics output:nth-child(3n+3), .iso-metrics p:nth-child(3n+3),
    .iso-metrics pre:nth-child(3n+3), .iso-metrics section:nth-child(3n+3),
    .iso-metrics table:nth-child(3n+3), .iso-metrics ul:nth-child(3n+3),
    .iso-metrics video:nth-child(3n+3) {
        background-color: #d0d0ff !important;
        background-color: rgba(0, 0, 255, 0.05) !important;
    }