如何实现CSS圆形Div旋转时内部图片保持默认方向？

要实现父圆形Div旋转但内部图片保持原方向，核心思路是给图片添加与父元素反向、同速的旋转动画，抵消父元素旋转带来的影响。

修改步骤： #

1. 添加反向旋转的CSS关键帧
2. 将该动画应用到内部图片元素上，覆盖父元素的旋转继承

修改后的完整代码： #

CSS部分

@keyframes rotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}

/* 添加反向旋转关键帧 */
@keyframes anti-rotate {
    from{ transform: rotate(0deg); }
    to{ transform: rotate(-360deg); }
}

#clock_two {
    width: 280px;
    height: 280px;
    background: #25283d;
    border: 18px solid black;
    border-radius: 50%;
    margin: 100px auto;
    position: relative;
    top: 5%;
    z-index: 9999;
    animation-name: rotate;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.numbers {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0%;
    text-align: center;
}

.numbers span {
    display: block;
    color: #dbe7fd;
    text-shadow: 0 5px 18px #00000026, 0 2px 3px #00000033;
}

.numbers img{
    width: 20px;
    /* 应用反向旋转动画，参数与父元素保持一致 */
    animation: anti-rotate 20s linear infinite;
}

.numbers:nth-child(1) {
    transform: rotate(40deg);
}
.numbers:nth-child(1) span {
    transform: rotate(-40deg);
}
.numbers:nth-child(2) {
    transform: rotate(80deg);
}
.numbers:nth-child(2) span {
    transform: rotate(-80deg);
}
.numbers:nth-child(3) {
    transform: rotate(120deg);
}
.numbers:nth-child(3) span {
    transform: rotate(-120deg);
}
.numbers:nth-child(4) {
    transform: rotate(160deg);
}
.numbers:nth-child(4) span {
    transform: rotate(-160deg);
}
.numbers:nth-child(5) {
    transform: rotate(200deg);
}
.numbers:nth-child(5) span {
    transform: rotate(-200deg);
}
.numbers:nth-child(6) {
    transform: rotate(240deg);
}
.numbers:nth-child(6) span {
    transform: rotate(-240deg);
}
.numbers:nth-child(7) {
    transform: rotate(280deg);
}
.numbers:nth-child(7) span {
    transform: rotate(-280deg);
}
.numbers:nth-child(8) {
    transform: rotate(320deg);
}
.numbers:nth-child(8) span {
    transform: rotate(-320deg);
}
.numbers:nth-child(9) {
    transform: rotate(360deg);
}
.numbers:nth-child(9) span {
    transform: rotate(-360deg);
}

HTML部分（无需修改）

<section>
    <div class="container">
        <div class="row justify-content-center">
            <div class="wrapper">
                    <ul id="clock_two">
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                      <li class="numbers"><span><img src="http://test.flyerq.com/ShopHunter/img/photo_03.jpg" class="avatar" /></span></li>
                    </ul>
            </div>
            </div>
        <div>
    </div>
</section>

原理说明： #

父元素#clock_two应用了顺时针360度的旋转动画，而内部图片应用了逆时针360度的同速动画，两者旋转方向相反、速度一致，视觉上就抵消了父元素旋转对图片的影响，让图片始终保持原始方向。

内容的提问来源于stack exchange，提问作者Mohamed Adel