JS
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(); Tengo una imagen de la esfera del reloj que no mira directamente al usuario, tiene un ángulo de 45 grados. Quiero que las manecillas del reloj ajusten ligeramente su altura dependiendo de dónde se encuentren en la esfera del reloj. Por el bien de la ilusión óptica.
Cuando uso el código tal como está, obtengo ligeramente el efecto deseado, pero la manecilla del reloj se vuelve más delgada alrededor de las 5-8 en el reloj, y la manecilla de los segundos no se extiende por completo en la posición de las 12 y las 6 en punto. ....
¿Cuál es otra forma de hacer esto con más control sobre el resultado?
CSS puede funcionar en 3D, por lo que si gira la esfera del reloj, las manecillas ajustarán automáticamente su altura y anchura.
Aquí hay un ejemplo simple. El fragmento hace que el ángulo de rotación sea de 80 en lugar de 45 grados para que pueda ver claramente que las manos se ajustan según su posición.
Obviamente, deberá pensar en dónde desea que se coloque el observador en relación con toda la escena en lugar de solo en relación con el reloj. Por lo tanto, será necesario investigar el origen de la perspectiva y la posición.
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 class="container"> <div class="clockface"> <div class="hours"></div> <div class="minutes"></div> <div class="seconds"></div> </div> </div>