Question

If I have this box in CSS3 (also if, for what I understand, this is not CSS3, just browsers specific) :

HTML

<div id="container">
    <div id="box">&nbsp;</div>
</div>    ​

CSS

#container
{
    padding:100px;
}

#box
{
    width:200px;
    height:200px;
    background-color:red;
}

#box.selected
{
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
    -o-transform: rotate(30deg); /* Opera */
    -moz-transform: rotate(30deg); /* Firefox */        
}
​

jQuery (just for manage the hover on the box)

$('#box').hover(
    function () {
        $(this).addClass('selected');
    },
    function () {
        $(this).removeClass('selected');
    }
);

how can I set an animation to that css rotation? I mean, not in 1 step, but fluid. So the moviment should be "animate". Hope you understand what I mean 🙂

Answer 1

Assuming you just want to apply an animation to the transformation, you can use CSS3 transitions, specifically transition-property (defines which properties will have a transition) and transition-duration (to specify the duration of the transition from start to completion). There is also transition-timing-function, which allows you to use any of the following modes of transition: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)

#box
{
    width:200px;
    height:200px;
    background-color:red;
    transition-property: all;
    transition-duration: 0.3s;
    /* Explicit above, can also use shorthand */
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    /* Also shorthand with the easing-function */
    -ms-transition: all 0.3s linear;
}

See my revision to your jsfiddle -> http://jsfiddle.net/fud4n/9/