Grow your CSS skills. Land your dream job.

Slow Me

  • # July 7, 2013 at 6:50 am

    .rotate{
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

    } .rotate:hover
    { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); }

    how can we slow down the Rotation it runs very fast

    # July 7, 2013 at 7:05 am

    Hi,

    To slow down the rotation you should change the transition duration.

    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

    Hope this helps :)

    # July 7, 2013 at 7:12 am

    nothing happend result is same

    # July 7, 2013 at 7:18 am

    Could you please provide me with the context of your problem. It would be useful if you could make a [CodePen](http://codepen.io/pen “codepen”) for me to have a look at or something similar.

    It could be that there is another css rule you have not told me about that is effecting your results.

    # July 7, 2013 at 7:26 am

    http://codepen.io/junni/pen/Iomkt

    # July 7, 2013 at 7:37 am

    change the 200ms to a larger number 1000ms is one second

    # July 7, 2013 at 7:37 am

    I have updated your pen here: [http://cdpn.io/mjAkh](http://cdpn.io/mjAkh “http://cdpn.io/mjAkh”)

    It seems that you had some styling as I suspected in another rule. IDs take priority over classes and so your rules where not effecting it.

    transition: all 200ms linear;

    is shorthand for:

    transition-duration: 200ms;
    transition-property: all;
    transition-timing-function: linear;

    :)

    # July 7, 2013 at 7:53 am

    thanx man

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".