响应时钟设计

Question

当我改变屏幕分辨率时，我需要使这个时钟响应，这意味着顺时针放在时钟的中间而不是在旋转期间移动

.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

试试这个代码

.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>