Ensure that CSS transformation rotation always moves in a clockwise direction without surpassing 360 degrees

Question

Ensure that CSS transformation rotation always moves in a clockwise direction without surpassing 360 degrees

As I work on designing a clock, I have implemented a combination of JS and CSS to create a seamless animation for the clock's "hands." This involves converting seconds, minutes, and hours into their corresponding degrees in the analog clock:

function clock() { 
  var t = moment(),
      s = t.seconds() * 6,
      a = t.minutes() * 6,
      o = t.hours() % 12 / 12 * 360 + (a / 12);

  $(".hour").css("transform", "rotate(" + o + "deg)");
  $(".minute").css("transform", "rotate(" + a + "deg)");
  $(".second").css("transform", "rotate(" + s + "deg)");
}

setInterval(clock, 1000);

One issue I encountered is that after reaching 360 degrees, I don't want the variable to continue increasing indefinitely. Instead, I prefer it to return to 0 and start over. However, CSS causes the hands to rotate anticlockwise, creating an unwanted effect.

Here's an example.

I've contemplated removing the transition property using JS when transitioning from 360 back to 0, and then reapplying it. While this could be a solution, I'm curious if there might be a cleaner approach.

javascript jquery css

Answer 1

Answer №1

To achieve this effect, you cannot do it using native methods. When transitioning from 356 degrees to 2 degrees, the rotation will always be counter clockwise. If you are okay with a visible tick when transitioning between these angles, you can simply remove the transition. However, there is no real reason to do so. Instead, try utilizing the fact that the `rotate` property can accept values above 360 degrees. So, rather than resetting back to 0, allow the clock to continue increasing endlessly (keep in mind that the highest integer value in JavaScript is 9007199254740991, so you may need to refresh your browser after a few million years... :)).

You can keep track of rotations by creating a separate object named `counter` outside of the setInterval callback like shown below:

var counter = {
  s: 0,
  a: 0,
  o: 0
};

var previous = null;

Next, you'll want to store all values from the previous iteration and compare them to the current values. If needed, increment the respective counter by one.

if(previous){
  if(s < previous.s){
    counter.s += 1;
  }
  if(a < previous.a){
    counter.a += 1;
  }
  if(o < previous.o){
    counter.o += 1;
  }
}

previous = {
  s: s,
  a: a,
  o: o
};

Finally, set the multiplied degree value in your inline CSS. This method allows you to maintain access to the actual values of `s`, etc. if needed for any other purpose.

$(".second").css("transform", "rotate(" + (s + 360 * counter.s) + "deg)");

For a working example, check out this fiddle: https://jsfiddle.net/dannyjolie/tccroo1q/6/

Answer 2

To achieve this effect, you cannot do it using native methods. When transitioning from 356 degrees to 2 degrees, the rotation will always be counter clockwise. If you are okay with a visible tick when transitioning between these angles, you can simply remove the transition. However, there is no real reason to do so. Instead, try utilizing the fact that the `rotate` property can accept values above 360 degrees. So, rather than resetting back to 0, allow the clock to continue increasing endlessly (keep in mind that the highest integer value in JavaScript is 9007199254740991, so you may need to refresh your browser after a few million years... :)).

You can keep track of rotations by creating a separate object named `counter` outside of the setInterval callback like shown below:

var counter = {
  s: 0,
  a: 0,
  o: 0
};

var previous = null;

Next, you'll want to store all values from the previous iteration and compare them to the current values. If needed, increment the respective counter by one.

if(previous){
  if(s < previous.s){
    counter.s += 1;
  }
  if(a < previous.a){
    counter.a += 1;
  }
  if(o < previous.o){
    counter.o += 1;
  }
}

previous = {
  s: s,
  a: a,
  o: o
};

Finally, set the multiplied degree value in your inline CSS. This method allows you to maintain access to the actual values of `s`, etc. if needed for any other purpose.

$(".second").css("transform", "rotate(" + (s + 360 * counter.s) + "deg)");

For a working example, check out this fiddle: https://jsfiddle.net/dannyjolie/tccroo1q/6/

Ensure that CSS transformation rotation always moves in a clockwise direction without surpassing 360 degrees

Answer №1

Similar questions

Is it best practice to display a DIV once it is no longer visible after scrolling down?

What steps can I take to ensure the proper formatting of the `select` input on Mac OS?

Please call hooks exclusively within the body of a function component. (fb.me/react-invalid-hook-call)

Converting the AppDelegate.m file to AppDelegate.mm and updating the AppDelegate.h file during the transition from React Native 0.66.4 to 0.71.3

Turn off the footer button on materialize.css modal

Navigating through asynchronous functions without the use of promises

Tips for managing and showcasing various user inputs in an array using JavaScript

Sorting tables using jQuery and fixing CSS issues specifically for Internet Explorer 8

Maintaining an array of data in Cordova/Phonegap that persists when the app is closed and reloads when reopened

Executing a sequence of two asynchronous calls in a serial manner using the promise API

Saving a picture from browser cache to the server

Issues arising with data transmission through the use of AJAX and the POST method

What is the best way to display the Edit and Delete buttons in a single column?

Intersecting object identification, fresh Function

When using the updateMany function, only update the field if it already exists, without creating a new key

The POST method in XHR encounters issues on IOS when used with the Canvas to Blob script

Using jQuery to send a JSON-encoded request containing multiple objects

Is there a way to use HTML alone to center a navigation link without using CSS?

"Incorporating Node.js (crypto) to create a 32-byte SHA256 hash can prevent the occurrence of a bad key size error triggered by tweetnacl.js. Learn how to efficiently

Is it possible to customize individual CSS attributes for a section within a webpage's layout using a view?