When the hands complete the rotation, they return to the initial position to start a new cycle, causing an effect that is not good:
const secondHand = document.querySelector(".second-hand");
const minHand = document.querySelector(".min-hand");
const hourHand = document.querySelector(".hour-hand");
function setDate() {
const now = new Date();
const seconds = now.getSeconds();
const secondDegrees = (seconds / 60) * 360 + 90;
secondHand.style.transform = `rotate(${secondDegrees}deg)`;
const minutes = now.getMinutes();
const minutesDegrees = (minutes / 60) * 360 + 90;
minHand.style.transform = `rotate(${minutesDegrees}deg)`;
const hours = now.getHours();
const hoursDegrees = (hours / 24) * 360 + 90;
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}
setInterval(setDate, 1000);
html {
background: #018ded url(https://unsplash.it/1500/1000?image=881&blur=5);
background-size: cover;
font-family: "helvetica neue";
text-align: center;
font-size: 10px;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}
.clock {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>JS + CSS Clock</title>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
<div class="hand min-hand"></div>
<div class="hand second-hand"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I added a variable that serves as the basis for the degrees of rotation. Initialized at 0, at second 59 it is incremented by 360 so that the rotation continues based on the previous rotation. The same for minutes and hours.