Responsive Clock-Design

Question

Ich brauche diese Uhr ansprechbar zu machen, wenn ich die Bildschirmauflösung Bedeutung in der Mitte der Uhr legte den Uhrzeigersinn zu ändern und nicht während der Rotation

.clock{ width: 500px; 
 
     height: 500px; 
 
     border-radius:100%; 
 
     margin: auto; 
 
     background:#333 ; 
 
     border:22px solid rgb(41, 25, 25) ; 
 
     position:relative; 
 
     box-shadow:0 5px 0 0 rgba(0, 0, 0, .3),inset 0 35px 0 0 rgba(0, 0, 0, .3), inset 0 0 0 214px #c33; 
 
} 
 
.hour{ 
 
    position: absolute; 
 
    top: 87px; 
 
    left: 822.5px; 
 
    width: 35px; 
 
    height: 198px; 
 
    display: block; 
 
    margin: auto; 
 
    box-shadow: inset 0px 2px 0 0 #fff, inset 0px 198px 0 0 #333; 
 
    transform: rotate(150deg); 
 
    transform-origin: bottom; 
 
} 
 
.minutes{ 
 
    position: absolute; 
 
    top: 115px; 
 
    left: 822.5px; 
 
    width: 35px; 
 
    height: 170px; 
 
    display: block; 
 
    margin: auto; 
 
    box-shadow: inset 0px 2px 0 0 #fff, inset 0px 170px 0 0 #333; 
 
    transform: rotate(150deg); 
 
    transform-origin: bottom; 
 
}

   <div class="clock"></div> 
 
       <div class="hour" id="hour"></div> 
 
       <div class="minutes" id="minute"></div> 
 
       </div>

Answer 1

diesen Code Versuchen Sie bewegen

.clock { 
 
    width: 500px; 
 
    height: 500px; 
 
    border-radius: 100%; 
 
    margin: auto; 
 
    background: #333; 
 
    border: 22px solid rgb(41, 25, 25); 
 
    position: relative; 
 
    box-shadow: 0 5px 0 0 rgba(0, 0, 0, .3), inset 0 35px 0 0 rgba(0, 0, 0, .3), inset 0 0 0 214px #c33; 
 
} 
 
.hour { 
 
    position: absolute; 
 
    top: 87px; 
 
    left: 50%; 
 
    width: 35px; 
 
    height: 198px; 
 
    display: block; 
 
    margin: auto; 
 
    box-shadow: inset 0px 2px 0 0 #fff, inset 0px 198px 0 0 #333; 
 
    transform: rotate(150deg); 
 
    transform-origin: bottom; 
 
} 
 
.minutes { 
 
    position: absolute; 
 
    top: 41px; 
 
    left: 46%; 
 
    width: 35px; 
 
    height: 170px; 
 
    display: block; 
 
    margin: auto; 
 
    box-shadow: inset 0px 2px 0 0 #fff, inset 0px 170px 0 0 #333; 
 
    transform: rotate(00deg); 
 
    transform-origin: bottom; 
 
}

<div class="clock"> 
 
    <div class="hour" id="hour"></div> 
 
    <div class="minutes" id="minute"></div> 
 
</div>