Flip dots

by Laura Kishimoto

HTML

<p>Click around! Proper scaling and patterns via JS to come later.</p>

<div class="board">
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel active"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel active"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
    <div class="pixel"></div>
 ...

SCSS

$colour-active: #d1e231;
$colour-inactive: #444444;
$colour-active-alt: darken(#d1e231, 7%);
$colour-inactive-alt: darken(#444444, 5%);

$pixel-radius: 10%;
$pixel-size: 1.5rem;
$pixel-transition: 2s;

html {
    box-sizing: border-box;
    font-family: sans-serif;
}
*, *:before, *:after {
    box-sizing: inherit;
}

.board {
    padding: 0.2rem;
    background: #222222;
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

.pixel {
    position: relative;
    float: left;
    margin: 2px;
    background: $colour-inactive;
    border: $pixel-size/2 solid $colour-inactive;
    border-top-color: $colour-active-alt;
    border-left-color: $colour-active-alt;
    border-radius: $pixel-radius;
    &:after {
        content: '';
        position: absolute;
        border: $pixel-size/2 solid transparent;
        border-top-color: $colour-inactive-alt;
        border-left-color: $colour-inactive-alt;
        border-radius: $pixel-radius;
        transform: translate(-50%, -50%) rotate3d(1, -1, 0, 0deg);
        transition: transform $pixel-transition, border 0s $pixel-transition/2;
    }
    &:nth-of-type(36n + 1) {
        clear: left;
    }
}

.active {
    &:after {
        transform: translate(-50%, -50%) rotate3d(1, -1, 0, 180deg);
        border-top-color: $colour-active;
        border-left-color: $colour-active;
    }
}

JavaScript

$('.pixel').click(function() {
    $(this).toggleClass('active');
});