CSS animation test

by andy_h

HTML

<section>

    <div class="box h-box animate">
        HOVER<br>Z BOX
    </div>
    
    <div class="box c-box">
        CLICK<br>Z BOX
    </div>
    
    <span class="clear"></span>
    
    <div class="box-wrap">
        <div class="box y-box animate">
            HOVER<br>Y BOX
        </div>
    </div>
    
    <span class="clear"></span>
    
    <div class="box-wrap">
        <div class="box x-box animate">
            HOVER<br>X BOX
        </div>
    </div>
    
</section>

CSS

.box{
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.box-wrap{
    height:80px;
    width:80px;
}
.h-box.animate:hover, .c-box.animate-on-click{
    -webkit-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360deg);
    -o-transform:rotateZ(360deg);
    -ms-transform:rotateZ(360deg);
    transform:rotateZ(360deg);
}
.box-wrap:hover .y-box.animate{
    -webkit-transform:rotateY(360deg);
    -moz-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    transform:rotateY(360deg);
}
.box-wrap:hover .x-box.animate{
    -webkit-transform:rotateX(360deg);
    -moz-transform:rotateX(360deg);
    -o-transform:rotateX(360deg);
    -ms-transform:rotateX(360deg);
    transform:rotateX(360deg);
}
div:hover{
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    /*-webkit-transition-delay: 100ms;*/
}

/*Styling*/
.box{
    cursor:pointer;
    background:MediumSpringGreen;
    float:left;
    margin:0 20px 20px 0;
    padding:22px 13px;
    text-align:center;
    width:50px;
    height:36px;
}
section{
    margin:20px;
    font:normal 13px/1.3 sans-serif;
}
.clear{
    display:block;
    clear:both;
}

JavaScript

$(document).ready(function(){
   
    $('.c-box').click(function(){
         $(this).toggleClass('animate-on-click');
    });
    
});