changing div height size during transform for x and y-CodePudding

setInterval(() => {
        let d = new Date();
        let sec = d.getSeconds();
        let min = d.getMinutes();
        let hrs = d.getHours();

const hourRotation = 30 * hrs   min / 2;
const minRotation = 6 * min;
const secondRotation = 6 * sec;

hours.style.transform = `rotate(${hourRotation}deg)`
minutes.style.transform = `rotate(${minRotation}deg)`
seconds.style.transform = `rotate3d(.5, .005, .6, ${secondRotation}deg)`

}, 1000)

new Date().getMinutes();
new Date().getSeconds();

I have a clock face image that is not directly facing the user, it is angled 45 degrees. I want the clock Hands to slightly adjust their height depending on where on the clock face they are. For the sake of optical illusion.
When I use the code as is, I slightly get the desired effect, but the clock hand gets thinner at around 5-8 mark on the clock, and the seconds hand does not get fully extended at the 12 o clock and 6 o clock position....
What is another way to do this with more control over the outcome?

CodePudding user response：

CSS can work in 3d so if you rotate your clockface the hands will automatically adjust their height and width.

Here's a simple example. The snippet makes the angle of rotation 80 rather than 45 degrees just so you can see clearly that the hands are adjusting depending on their position.

You will obviously need to think about where you want the observer to be positioned in relation to your whole scene rather than just in relation to the clock. So perspective-origin and position will need looking into.

const hours = document.querySelector('.hours');
const minutes = document.querySelector('.minutes');
const seconds = document.querySelector('.seconds');
setInterval(() => {
  let d = new Date();
  let sec = d.getSeconds();
  let min = d.getMinutes();
  let hrs = d.getHours();

  const hourRotation = 30 * hrs   min / 2;
  const minRotation = 6 * min;
  const secondRotation = 6 * sec;

  hours.style.transform = `rotate(${hourRotation}deg)`
  minutes.style.transform = `rotate(${minRotation}deg)`
  //seconds.style.transform = `rotate3d(.5, .005, .6, ${secondRotation}deg)`
  seconds.style.transform = `rotate(${secondRotation}deg)`

}, 1000)

* {
  margin: 0;
  padding: 0;
}

.container {
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vmin;
  position: relative;
}

.clockface {
  position: relative;
  width: 50vmin;
  height: 50vmin;
  background: gray;
  border-radius: 50%;
  transform: rotateY(-80deg);
  transform-style: preserve-3d;
}

.clockface>* {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 2.5%);
  width: 5%;
  height: 50%;
  transform-origin: 50% 98%;
}

.hours {
  background: red;
}

.minutes {
  background: green;
}

.seconds {
  background: blue;
}

<div >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</div>