Interaktivt Ur

#clock { width: 80vw; max-width: 500px; aspect-ratio: 1/1; background: url('https://skoleudstyr.dk/wp-content/uploads/2023/12/ur.svg') no-repeat center center; position: relative; margin: 0 auto; } .hand { position: absolute; transform-origin: 50% 100%; left: 50%; cursor: pointer; user-select: none; touch-action: none; } #secondHand { background-color: #699a53; height: 170px; width: 2px; top: 50%; transform: translateX(-50%); } #minuteHand, #hourHand { height: 40%; width: 20%; top: 50%; transform: translate(-50%, -100%) rotate(0deg); } #minuteHand img, #hourHand img { width: 100%; height: 100%; object-fit: contain; } #centerCircle { position: absolute; background-color: #699a53; width: 4%; height: 4%; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; }