Isometric Interface

by SebastianPataneMasuelli

HTML

<header>II</header>

CSS

html{ background: white;}
body{ -webkit-transform: skew(45deg); width: 200px; margin: 50px auto; border: 1px solid pink}
header { margin: 0px; border: 1px salmon solid; font-size: 1em; }
header:hover { 
    
    cursor: pointer;
    
    
}

.south {
    -webkit-transform: skew(-45deg);
    -webkit-transform-origin: 0 100%;
    -webkit-transition: all 1s ease-in-out; 
}
.west {
   
    -webkit-transform: rotate(-40deg);
    -webkit-transform-origin:  0 100%;
    -webkit-transition: all 1s ease-in-out;
    
}

.north {
     -webkit-transform: skew(-15deg);
    -webkit-transform-origin: 0 100%;
    -webkit-transition: all 1s ease-in-out; 
}


.east {
    -webkit-transform: rotate(-40deg);
    -webkit-transform-origin:  100% 0;
    -webkit-transition: all 1s ease-in-out;
}

JavaScript

//$('header').mouseover(function() {
   
    for (var i = 0; i < 4; i++){

       
        javascript: console.log(i);
        switch(i){
            case 0:
                $('header').html('south').addClass('south').prependTo($(this).parent());
                javascript: console.log($('body').html());
                break;
            case 1:
                $('header.south').clone().html('west').removeAttr('class').addClass('west').prependTo('body');
                javascript: console.log($('body').html());
                break;
            case 2:
                 $('header.south').clone().html('north').removeAttr('class').addClass('north').prependTo('body');
                javascript: console.log($('body').html());
                break;
            case 3:
                 $('header.south').clone().html('east').removeAttr('class').addClass('east').prependTo('body');
                javascript: console.log($('body').html());
                
                break;    
            default:
                alert('d');
                break;
           // javascript: console.log('OK');
            
        }
        
    }
//});