CSS Transform Board

by Tonio Loewald

HTML

<div class="board">
</div>

CSS

body {
    background-color: #bbb;
}
.board {
    position: relative;
    width: 100px;
    height: 100px;
    transform: perspective(200px) translate3d(150px,150px,0) scale(4);
    background-color: white;
}

.square {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #f88;
    opacity: 0.75;
    transition: 0.5s;
    transition-timing-function: ease-out;
    transform-style: preserve-3d;
    transform: translateZ(0);
}
.blue{
    background-color: #88f;
}
.square:hover {
    opacity: 0.9;
}
.square.active {
    opacity: 1.0;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: perspective(200px) rotateY(180deg);
}
.col0 {
    left: 0;
}
.col1 {
    left: 20px;
}
.col2 {
    left: 40px;
}
.col3 {
    left: 60px;
}
.col4 {
    left: 80px;
}
.row0 {
    top: 0;
}
.row1 {
    top: 20px;
}
.row2 {
    top: 40px;
}
.row3 {
    top: 60px;
}
.row4 {
    top: 80px;
}

JavaScript

for(var i = 0; i < 25; i++){
   var x = i % 5, y = Math.floor(i/5);
   $('<div>')
   .addClass('square')
   .addClass('col' + x)
   .addClass('row' + y)
   .appendTo('.board')
   .addClass(i % 2 ? 'blue' : '')
}

$('.square').on('click', function(){
    var square = $(this);
    if( square.is('.active')){
            $('.active').removeClass('active');
       } else {
            $('.active').removeClass('active');
            square.appendTo('.board');
            setTimeout(function(){
               square.addClass('active');
            },0);
       }
});