Skewed Chooser

skew chooser

by James Doyle

HTML

<div class="boxes">
    <div onclick="activate(this.id,20)" id="one"></div>
    <div onclick="activate(this.id,50)" id="two"></div>
    <div onclick="activate(this.id,80)" id="three"></div>
    <div onclick="activate(this.id,110)" id="four"></div>
    <div onclick="activate(this.id,140)" id="five"></div>
</div>

CSS

.boxes div {
    position: absolute;
    top: 10px;
    left: 0;
    width: 40px;
    height:40px;
    background: #000;
    z-index: 1;
    -webkit-transform: translate3d(0px, 0px, 0px);
    -webkit-transition: all 0.5s ease;
    -webkit-transform: skew(-20deg, 10deg);
}

JavaScript

var boxes = Array('one', 'two', 'three', 'four', 'five');
var backgrounds = Array('green', 'blue', 'red', 'yellow', 'purple');
var newleft = 20;
var active = null;
for (var i = 0; i < boxes.length; i++) {
    var getbox = document.getElementById(boxes[i]);
    getbox.style.background = backgrounds[i];
    getbox.style.left = newleft + "px";
    newleft += 30;
}

function activate(id, left) {
    var clicked = document.getElementById(id);
    var oldleft = left;
    if (clicked.style.top == "100px") {
        clicked.style.zIndex = "1";
        clicked.style.top = "10px";
        clicked.style.left = oldleft + "px";
        clicked.style.WebkitTransform = "skew(-20deg,10deg)";
        clicked.style.width = "40px";
        clicked.style.height = "40px";
    } else {
        clicked.style.width = "250px";
        clicked.style.height = "150px";
        clicked.style.zIndex = "6";
        clicked.style.left = "0px";
        clicked.style.top = "100px";
        clicked.style.WebkitTransform = "skew(0deg,0deg)";
    }
}