messing with jquery .css manipulation

by cliftonyeo

HTML

<div id="test" class="base"></div>

<ul id="buttons">
    <li><button id="BTN">lala</button></li>
    <li><button id="BTN_two">baba</button></li>
</ul>

CSS

#test {
    position:absolute;
    top: 50px;
    left: 50px;
    height:100px;
    width:10px;
    background-color:blue;
    transition: 1s;
    transform:rotate(0deg);
}

#buttons {
    position:absolute;
    top:300px;
}

JavaScript

$("#BTN").click(function() {    
    $("#test").css("width","100px")
    $("#test").css("height","10px")
    $("#test").css("transform","rotate(2250deg)")
}
);

$("#BTN_two").click(function() {    
    $("#test").css("width","10px")
    $("#test").css("height","100px")
    $("#test").css("transform","rotate(-45deg)")
}
);