how do I fix a point on a CSS line [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
I am trying to make an analog clock with HTML,CSS and Javascript but I don´t know how to fix the clock hands when rotateing
.line {
border-left: 2px solid gray;
height: 65px;
transform: translate(100px);transform-origin: 100px;
}

Answer 1

This should do. Hope it helps you!
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 timeInterval = 6;
const seconds = now.getSeconds();
const secondDegree = seconds * timeInterval;
secondHand.style.transform = `rotate(${secondDegree}deg)`;
const mins = now.getMinutes();
const minDegree = ((mins / 60) * 360) + 90;
minHand.style.transform = `rotate(${minDegree}deg)`;
const hours = now.getHours();
const hourDegree = ((hours / 12) * 360) + 90;
hourHand.style.transform = `rotate(${hourDegree}deg)`;
}
setInterval(setDate, 1000);
html {
/* background: #ededed 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 */
}
.center {
position: absolute;
background-color: yellow;
top: 50%;
right: 49%;
width: 8px;
height: 8px;
border-radius: 50%;
}
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
border-radius: 5px;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.5s;
transition-timing-function: cubic-bezier(0, 2.58, 1, 0.6);
}
<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 class="center"></div>
</div>
</div>