Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to determine direction of rotation in CSS3 transitions?

Tags:

css

I'd like to rotate an object from -180 degrees to 180 degrees via CSS3 transforms and transitions. This works fine, but I'd like to control the direction of rotation. How to determine if it will be going clockwise or counter clockwise?

like image 295
Monokai Avatar asked Nov 01 '10 20:11

Monokai


2 Answers

0 .. 180 is clockwise, 0 .. -180 is counterclockwise. So, positive number rotates clockwise, negative - other way around. You can also keep increasing/decreasing the number to continue rotation, the browser will remove additional 360s.

I created an example of how to rotate:

<html>
<style type="text/css">
.rotatedDiv {
    margin-top: 200px;
    margin-left: 200px;
    -webkit-transition: -webkit-transform 3s ease-in;
    -webkit-transform: rotate(1deg); 
    -moz-transform: rotate(1deg);
}

</style>

<body>
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'">
This div will do a spin when clicked!
</div>

</body>
</html>

First we display rotated div. When you click on it, it will rotate. Depending on the value - negative or positive it will rotate counter-clockwise or clockwise.

like image 125
Roman Goyenko Avatar answered Sep 19 '22 03:09

Roman Goyenko


It seems that you also need to remember to put in the "from" initial concrete values, otherwise the +/- direction sign won't behave well.

like image 31
Uri Avatar answered Sep 23 '22 03:09

Uri