/*================== CSS TRANSITIONS ===================*/

#transition-one{
    transition: transform 2s;
    -moz-transition:transform 2s;
    -ms-transition: transform 2s;
    -o-transition: transform 2s;
    -webkit-transition: transform 2s;
}

#transition-one:hover{
    transform:translateX(100vw);
    -moz-transform:translateX(100vw);
    -ms-transform:translateX(100vw);
    -o-transform:translateX(100vw);
    -webkit-transform:translateX(100vw);
}

#transition-two{
    transition: transform 5s;
    -moz-transition:transform 2s;
    -ms-transition: transform 2s;
    -o-transition: transform 2s;
    -webkit-transition: transform 2s;
}
#transition-two:hover{
    transform:translateY(100vw);
    -moz-transform:translateY(100vw);
    -ms-transform:translateY(100vw);
    -o-transform:translateY(100vw);
    -webkit-transform:translateY(100vw);
}
#transition-three{
    transition: transform 5s;
}

    #transition-three:hover{
        transform: translate(100vw,100vw);
    }

#transition-four{
    transition: transform 2s;
}

#transition-four:hover{
    transform:rotate(360deg);
    -moz-transform:translateY(360deg);
    -ms-transform:translateY(360deg);
    -o-transform:translateY(360deg);
    -webkit-transform:translateY(360deg);
}

#transition-five{
    transition: transform 2s;
}

    #transition-five:hover{
        transform: scale(5)
    }

#transition-six{
    transition: transform 2s;
}
    #transition-six:hover{
        transform: skew(90deg,90deg)
    }