div的CSS转换中心

Question

我想制作一个动画，指针根据时钟的中心旋转，但在动画过程中我仍然遇到移动指针的问题。任何人都可以帮助我吗？

我的代码：

#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

如果您使用position: absolute;父元素，则可以green span使用position: relative;。

查看CSS中的评论

＆＃13;

＆＃13;

#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); }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;