防止元素在循环CSS3动画中自行旋转 [英] Prevent an element to rotate itself in a circular CSS3 animation

问题描述

好吧，这是真的让我很失望，首先，如果我的问题框架是错误的，请编辑它（如果你这么认为）...和确定，因为我的屏幕会解释你，但仍然我会像我的元素应该保持在一个特定的形状，而不是与动画一起旋转，我错过了一些真正的愚蠢的事情？

Ok so this is really getting frustrated for me here, first of all if my question framing is wrong please do edit it(if you think so)...and ok, as my screens will explain you, but still I would like that my element should stay in a specific shape and not to rotate along with the animation, am missing something really stupid thing?

我想要的：

发生了什么：

jQuery解决方案很受欢迎（但我会喜欢CSS3解决方案） p>

jQuery Solutions Are Welcomed (But I Would Love CSS3 Solutions)

注意：不要使用元素的不透明度，1是使用Paint创建的，
是使用Photoshop创建的，What Matter's Is Square Should旋转为正方形
形状

Note: Don't go on the element's opacity, 1 is made using Paint and other with Photoshop, What Matter's Is Square Should Rotate As Square Shape

HTML

<div><span></span></div>

CSS

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

div {
    width: 50px;
    height: 50px;
    animation: round_round 3s linear infinite;
    margin: 50px auto 0;
    transform-origin: 50% 150px;
    background-color: #8FC1E0;
}

span {
    display: inline-block;
    margin: 5px;
    height: 5px;
    width: 5px;
    background: #c00000;
}

演示

推荐答案

t更改 transform-origin ，保留 50％50％。

然后简单地旋转元素，将其转换为半径值，然后取消第一个旋转 - 您可以看到链接变换的工作原理 here 。

Then simply rotate the element, translate it by the value of the radius and then cancel the first rotation - you can see how chaining transforms works here.

@keyframes rot {
  0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(150px) rotate(-360deg); }
}

这篇关于防止元素在循环CSS3动画中自行旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！