.trans(@ile){
transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(@ile) rotateY(0deg) rotateZ(0deg);
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(@ile) rotateY(0deg) rotateZ(0deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(@ile) rotateY(0deg) rotateZ(0deg);
-o-transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(@ile) rotateY(0deg) rotateZ(0deg);
-ms-transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(@ile) rotateY(0deg) rotateZ(0deg);
perspective: 1000px;-webkit-perspective: 1000px; perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%;
}

nav {

    li {
        position: relative;
        a{
        span {
            display: inline-block;
            position: absolute;
            left:0;
            transition: 3s all;
            -moz-transition: 3s all;

            padding: 10px;
            color: #fff;

            &:nth-child(1){
                .trans(90deg);
                background-color: red;
                }

            &:nth-child(2){
                .trans(0deg);
                background-color: green;
            }

        }
        &:hover{
            span{
            &:nth-child(1){
               .trans(0deg);
                }

            &:nth-child(2){
               .trans(-90deg);
                top:10px;
            }
            }
        }
        }
    }
}