Home/ Questions/Q 3306336
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T21:16:36+00:00

I’d like to rotate an object from -180 degrees to 180 degrees via CSS3

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0