CSS変換の中心

Question

インジケータが時計の中心に基づいて回転するアニメーションを作成したいと思いますが、アニメーション中に移動するポインタにはまだ問題があります。誰でも助けてくれますか？

マイコード：あなたはそれにposition: relative;を使用する場合はgreen spanにposition: absolute;を使用することができます

#counter-clock { 
 
    background: url(http://bluesolution.e-kei.pl/wp-content/uploads/2017/12/clock.png); 
 
    background-size: cover; 
 
    width: 154px; 
 
    height: 154px; 
 
    animation: 1s ease-out 0s 1 rotate; 
 
} 
 
#counter-clock span{ 
 
     background: green; 
 
    width: 11px; 
 
    height: 65px; 
 
    margin: 20px auto; 
 
    transition: transform 1s linear; 
 
     transform-origin: bottom center; 
 
    transform-style: preserve-3D; 
 
    transform: rotate(221deg); 
 
    display: block; 
 
    animation: test 2s 1s linear forwards; 
 
} 
 
@-webkit-keyframes test { 
 
    0% {transform: rotate(221deg);; } 
 
    100% { transform: rotate(380deg); } 
 
}

<div class="vc_empty_space" id="counter-clock" style="height: 154px"><span class="vc_empty_space_inner"></span></div>

Answer 1

は親要素です。

はCSSで

#counter-clock { 
 
    position: relative; /* add this line */ 
 
    
 
    background: url(http://bluesolution.e-kei.pl/wp-content/uploads/2017/12/clock.png); 
 
    background-size: cover; 
 
    width: 154px; 
 
    height: 154px; 
 
    animation: 1s ease-out 0s 1 rotate; 
 
} 
 
#counter-clock span{ 
 
     position:absolute; /* add this line */ 
 
     left:0; right:0; /* add this line */ 
 
     top:-5px; bottom:-5px; /* add this line */ 
 

 

 
     background: green; 
 
    width: 11px; 
 
    height: 65px; 
 
    margin: 20px auto; 
 
    transition: transform 1s linear; 
 
     transform-origin: bottom center; 
 
    transform-style: preserve-3D; 
 
    transform: rotate(221deg); 
 
    display: block; 
 
    animation: test 2s 1s linear forwards; 
 
} 
 
@-webkit-keyframes test { 
 
    0% {transform: rotate(221deg);; } 
 
    100% { transform: rotate(380deg); } 
 
}

<div class="vc_empty_space" id="counter-clock" style="height: 154px"><span class="vc_empty_space_inner"></span></div>