jquery – 防止元素在循环CSS3动画中旋转

前端之家收集整理的这篇文章主要介绍了jquery – 防止元素在循环CSS3动画中旋转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
好的,这对我来说真的很沮丧,首先如果我的问题框架错了,请修改它(如果你这样想)…好的,因为我的屏幕会解释你,但是我仍然希望我元素应该保持特定的形状,不要与动画一起旋转,我错过了一些真正愚蠢的东西?

我想要的是 :

发生了什么 :

jQuery解决方案欢迎(但我会喜欢CSS3解决方案)

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

Demo

解决方法

绝对定位,不要改变变换来源,将其保留在50%的50%.

然后简单地旋转元素,将其转换为半径的值,然后取消第一个旋转 – 您可以看到链接变换如何工作here.

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

demo

原文链接:https://www.f2er.com/jquery/176581.html

猜你在找的jQuery相关文章