css实现圆周运动 - 简书 - 程序猿·D·安宇雨 DeepMind

css实现圆周运动 - 简书

安宇雨 - 随手采集
2023-10-12 17:39:14
随手采集
0000-未整理-等待研究

自身旋转

旋转元素，首先想到的就是rotate这个属性。

.circle {
    width: 30px;
    height: 30px;
    background: #aaa;
    animation: spin 3s linear;
}
@keyframes spin{
    to {
        transform: rotate(1turn);
    }
}

详见https://jsfiddle.net/8nt3k843/

绕圆旋转

rotate可以实现旋转，但只是绕自身旋转，是以其中心为圆心，进行旋转。如果想实现绕着一个圆进行旋转，则需要多用到一个属性了。

.container {
    width: 300px;
    height: 300px;
    border: 1px dotted red;
    border-radius: 50%;
    position: relative;
    box-sizing: border-box;
}
.circle {
    position: absolute;
    left: 50%;
    top: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #aaa;
    transform-origin: 0 150px; 
    animation: spin 3s infinite linear
}

如上代码，增加transform-origin这个属性，使旋转的中心刚好位于圆的中心，这样就可以实现绕圆旋转了。

详见https://jsfiddle.net/ysm0Lurg/

绕圆旋转，内容不转

乍一看，实现了绕圆的效果，但注意到我们的旋转的元素是没有内容的，如果有内容的话，又会如何呢

效果见https://jsfiddle.net/7fc06a9c/

可以看到，旋转元素里面的内容也跟着元素一起旋转起来，但这并不是我们想要的效果。

有没有什么方法可以让内容不跟着一起旋转呢？其实很简单，再嵌套一层，然后让里面的内容进行反方向旋转就好了。

.circle{
    animation: spin 3s linear;
}
.content {
    animation: inherit;
    animation-direction: reverse;
}

代码详见https://jsfiddle.net/t1cnn6fo/

绕圆旋转，不而外嵌套

通过嵌套多了一层，让内外层往不同的方向旋转，达到内容不旋转的效果。那么，有没有可能不而外嵌套呢，方法也是有的。
那就是利用translate来实现。

@keyframes spin {
from {
    transform: translate(-50%, 135px) rotate(0turn) translate(50%, -135px) rotate(1turn)
}
to {
    transform: translate(-50%, 135px) rotate(1turn) translate(50%, -135px) rotate(0turn)
}
}

先利用translate，将旋转的中心与圆的中心重合，然后进行旋转，之后又利用translate，移动到原先的位置。最后再围绕自身中心，进行反方向旋转，以达到内容不旋转的效果

代码详见https://jsfiddle.net/243wbskt/

其实，最关键的一点还是在于坐标的转换，如下所示：

// 核心要点

// css
transform-origin: x y;  // x, y为元素左上角相对圆心坐标的距离
transform: rotate(30deg);

// 等价于
// transform-origin: 0 0;
transform: translate(x, y); // x, y为元素左上角相对圆心坐标的距离
transform: rotate(30deg);
transform: translate(-x, -y); // x, y为元素左上角相对圆心坐标的距离

参考链接：http://www.w3cplus.com/css3/css-secrets/animation-along-a-circular-path.html

原网址: 访问
创建于: 2023-10-12 17:39:13
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到