HTML5, CSS3 & JS Experiments

            
            <p>If you like this experiment, you may also want to see 
                it <a href="x-chessboard-html5-web-component.html" target="_blank">extended as a custom</a> HTML5 Web Component tag.</p>
            
            <p> </p<p> </p><p> </p>
            
            <div class="acidjs-chessboard">
                <ul>
                    <li class="black rook"><!-- / --></li>
                    <li class="black knight"><!-- / --></li>
                    <li class="black bishop"><!-- / --></li>
                    <li class="black queen"><!-- / --></li>
                    <li class="black king"><!-- / --></li>
                    <li class="black bishop"><!-- / --></li>
                    <li class="black knight"><!-- / --></li>
                    <li class="black rook"><!-- / --></li>
                    
                    <li class="black pawn"><!-- / --></li>
                    <li class="black pawn"><!-- / --></li>
                    <li><!-- / --></li>
                    <li class="black pawn"><!-- / --></li>
                    <li class="black pawn"><!-- / --></li>
                    <li class="black pawn"><!-- / --></li>
                    <li class="black pawn"><!-- / --></li>
                    <li class="black pawn"><!-- / --></li>
                    
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    
                    <li><!-- / --></li>
                    <li class="black pawn"><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li class="white pawn"><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    <li><!-- / --></li>
                    
                    <li class="white pawn"><!-- / --></li>
                    <li class="white pawn"><!-- / --></li>
                    <li class="white pawn"><!-- / --></li>
                    <li class="white pawn"><!-- / --></li>
                    <li><!-- / --></li>
                    <li class="white pawn"><!-- / --></li>
                    <li class="white pawn"><!-- / --></li>
                    <li class="white pawn"><!-- / --></li>
                    
                    <li class="white rook"><!-- / --></li>
                    <li class="white knight"><!-- / --></li>
                    <li class="white bishop"><!-- / --></li>
                    <li class="white queen"><!-- / --></li>
                    <li class="white king"><!-- / --></li>
                    <li class="white bishop"><!-- / --></li>
                    <li class="white knight"><!-- / --></li>
                    <li class="white rook"><!-- / --></li>
                </ul>
            </div>
        

/*
 * Animated CSS3 Only Chessboard by Martin Ivanov (@wemakesitesnet)
 * @version 1.0
 * @author Martin Ivanov
 * @url portfolio http://wemakesites.net/
 * @url twitter https://twitter.com/wemakesitesnet
 * @url blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 **/

.acidjs-chessboard,
.acidjs-chessboard *,
.acidjs-chessboard *::before,
.acidjs-chessboard *::after
{
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.acidjs-chessboard ul::before,
.acidjs-chessboard li:nth-child(57)::before,
.acidjs-chessboard li:nth-child(58)::before,
.acidjs-chessboard li:nth-child(59)::before,
.acidjs-chessboard li:nth-child(60)::before,
.acidjs-chessboard li:nth-child(61)::before,
.acidjs-chessboard li:nth-child(62)::before,
.acidjs-chessboard li:nth-child(63)::before,
.acidjs-chessboard li:nth-child(64)::before,
.acidjs-chessboard li:nth-child(1)::before,
.acidjs-chessboard li:nth-child(9)::before,
.acidjs-chessboard li:nth-child(17)::before,
.acidjs-chessboard li:nth-child(25)::before,
.acidjs-chessboard li:nth-child(33)::before,
.acidjs-chessboard li:nth-child(41)::before,
.acidjs-chessboard li:nth-child(49)::before
{
    position: absolute;
    bottom: -32px;
    font: bold 24px Georgia, Garamond;
    color: #2f343a;
}

.acidjs-chessboard li:nth-child(-2n+8), 
.acidjs-chessboard li:nth-child(8) ~ li:nth-child(-2n+15), 
.acidjs-chessboard li:nth-child(16) ~ li:nth-child(-2n+24),
.acidjs-chessboard li:nth-child(24) ~ li:nth-child(-2n+31),
.acidjs-chessboard li:nth-child(32) ~ li:nth-child(-2n+40),
.acidjs-chessboard li:nth-child(40) ~ li:nth-child(-2n+47),
.acidjs-chessboard li:nth-child(48) ~ li:nth-child(-2n+56),
.acidjs-chessboard li:nth-child(56) ~ li:nth-child(-2n+63)
{
    background-color: #2f343a;
}

.acidjs-chessboard li:nth-child(1)::before,
.acidjs-chessboard li:nth-child(9)::before,
.acidjs-chessboard li:nth-child(17)::before,
.acidjs-chessboard li:nth-child(25)::before,
.acidjs-chessboard li:nth-child(33)::before,
.acidjs-chessboard li:nth-child(41)::before,
.acidjs-chessboard li:nth-child(49)::before
{
    bottom: 22px;
    left: -32px;
}

.acidjs-chessboard,
.acidjs-chessboard ul
{
    width: 512px;
    height: 512px;
}

.acidjs-chessboard ul,
.acidjs-chessboard li
{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.acidjs-chessboard *
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.acidjs-chessboard
{
    margin: auto;
    cursor: default;
    position: relative;
    z-index: 5;
    
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
}

.acidjs-chessboard ul
{
    border: solid 3px #2f343a;
    box-shadow: 4px 6px 6px 2px rgba(0, 0, 0, .25);
        
    -webkit-backface-visibility: visible;
    -webkit-animation: spin 30s infinite;
    
    -moz-backface-visibility: visible;
    -moz-animation: spin 30s infinite;
    
    -ms-backface-visibility: visible;
    -ms-animation: spin 30s infinite;
    
    -o-backface-visibility: visible;
    -o-animation: spin 30s infinite;
    
    backface-visibility: visible;
    animation: spin 30s infinite;
}

.acidjs-chessboard li
{
    float: left;
    width: 64px;
    height: 64px;
    text-align: center;
}

.acidjs-chessboard li:nth-child(8n + 1)
{
    clear: left;
}

.acidjs-chessboard li:nth-child(1)::before
{
    content: "1";
}

.acidjs-chessboard li:nth-child(9)::before
{
    content: "2";
}

.acidjs-chessboard li:nth-child(17)::before
{
    content: "3";
}

.acidjs-chessboard li:nth-child(25)::before
{
    content: "4";
}

.acidjs-chessboard li:nth-child(33)::before
{
    content: "5";
}

.acidjs-chessboard li:nth-child(41)::before
{
    content: "6";
}

.acidjs-chessboard li:nth-child(49)::before
{
    content: "7";
}

.acidjs-chessboard ul::before
{
    content: "8";
    bottom: 22px;
    left: -32px;
}

.acidjs-chessboard li:nth-child(57)::before
{
    content: "a";
}

.acidjs-chessboard li:nth-child(58)::before
{
    content: "b";
}

.acidjs-chessboard li:nth-child(59)::before
{
    content: "c";
}

.acidjs-chessboard li:nth-child(60)::before
{
    content: "d";
}

.acidjs-chessboard li:nth-child(61)::before
{
    content: "e";
}

.acidjs-chessboard li:nth-child(62)::before
{
    content: "f";
}

.acidjs-chessboard li:nth-child(63)::before
{
    content: "g";
}

.acidjs-chessboard li:nth-child(64)::before
{
    content: "h";
}

.acidjs-chessboard li::after
{
    display: block;
    font: bold 52px/64px "Arial Rounded MT", Arial, Helvetica, Sans-serif;
    text-shadow: 6px 6px rgba(0, 0, 0, .5);
    color: #1572b7;
    
    -webkit-transform: translate3d(0, 0, 15px);
    -moz-transform: translate3d(0, 0, 15px);
    -ms-transform: translate3d(0, 0, 15px);
    -o-transform: translate3d(0, 0, 15px);
    transform: translate3d(0, 0, 15px);
}

.acidjs-chessboard .black::after
{
    color: #e74c3c;
}

.acidjs-chessboard .rook::after
{
    content: "\2656";
}

.acidjs-chessboard .pawn::after
{
    content: "\2659";
}

.acidjs-chessboard .knight::after
{
    content: "\2658";
}

.acidjs-chessboard .bishop::after
{
    content: "\2657";
}

.acidjs-chessboard .king::after
{
    content: "\2654";
}

.acidjs-chessboard .queen::after
{
    content: "\2655";
}

@-webkit-keyframes spin 
{
    to
    {
        -webkit-transform: rotatex(-360deg) rotatey(-360deg) rotatez(-360deg);
    }
}

@-moz-keyframes spin 
{
    to
    {
        -moz-transform: rotatex(-360deg) rotatey(-360deg) rotatez(-360deg);
    }
}

@-ms-keyframes spin 
{
    to
    {
        -ms-transform: rotatex(-360deg) rotatey(-360deg) rotatez(-360deg);
    }
}

@-o-keyframes spin 
{
    to
    {
        -o-transform: rotatex(-360deg) rotatey(-360deg) rotatez(-360deg);
    }
}

@keyframes spin 
{
    to
    {
        transform: rotatex(-360deg) rotatey(-360deg) rotatez(-360deg);
    }
}

body
{
    overflow-x: hidden;
}

.acidjs-chessboard
{
    transform: scale(.75);
    transform-origin: top left;
}