Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 设置环绕一个圆旋转的动画_Css_Css Animations - Fatal编程技术网

Css 设置环绕一个圆旋转的动画

Css 设置环绕一个圆旋转的动画,css,css-animations,Css,Css Animations,我正在尝试创建一个CSS动画,让一个环围绕一个圆旋转,但没有太大成功。我四处寻找,或多或少地想看看我是如何做到这一点的,我得出了以下结论: html,正文{ 身高:100%; } #包装纸{ 对齐项目:居中; 显示器:flex; 高度:400px; 证明内容:中心; } #装载{ 高度:400px; 位置:相对位置; 宽度:400px; } img{ 位置:绝对位置; } .戒指{ 动画:环形线性2s无限; } @关键帧环{ 100% { 变换:旋转3d(1,1,1,-360度)旋转(-360

我正在尝试创建一个CSS动画,让一个环围绕一个圆旋转,但没有太大成功。我四处寻找,或多或少地想看看我是如何做到这一点的,我得出了以下结论:

html,正文{
身高:100%;
}
#包装纸{
对齐项目:居中;
显示器:flex;
高度:400px;
证明内容:中心;
}
#装载{
高度:400px;
位置:相对位置;
宽度:400px;
}
img{
位置:绝对位置;
}
.戒指{
动画:环形线性2s无限;
}
@关键帧环{
100% {
变换:旋转3d(1,1,1,-360度)旋转(-360度)旋转y(360度);
}
}

注意,在第二个片段中,您正在从
旋转(120度)
旋转(120度)
设置动画
rotate()
在Z轴上旋转元素,这可能正是您需要的

如果您的目标只是旋转Yaxis上的元素,则应删除
.ring
元素上的变换贴花,如下所示:

html,正文{
身高:100%;
}
#包装纸{
对齐项目:居中;
显示器:flex;
高度:400px;
证明内容:中心;
}
#装载{
高度:400px;
位置:相对位置;
宽度:400px;
}
img{
位置:绝对位置;
}
.戒指{
动画:环形线性6s无限;
变换:旋转(0度)旋转(120度);
}
@关键帧环{
到{变换:旋转(360度)旋转(120度);}
}

html,正文{
身高:100%;
}
#包装纸{
对齐项目:居中;
显示器:flex;
高度:400px;
证明内容:中心;
}
#装载{
高度:400px;
位置:相对位置;
宽度:400px;
}
img{
位置:绝对位置;
}
.戒指{
动画:环形线性2s无限;
}
@关键帧环{
100% {
变换:旋转(-360度);
}
}


您想要实现什么样的动画效果?圆应该如何精确旋转?暂时忘记旋转,动画将非常简单
rotateY()
,一次又一次地围绕圆旋转。要实现这一点,应将环对角放置。我尝试了120度,但在实际情况下,我可能需要调整一点,但要保持动画像
rotateY()
,只沿对角线方向。但是,当旋转环时,Y轴似乎“不再垂直”。第二个片段是在使环成对角线方向后,为完成此操作而进行的一次令人遗憾的尝试。它必须是对角的,因为在同一时间会有其他的环在不同的位置一起旋转。你的方法是在Y轴上旋转,是的,(这里我为这个错误道歉,我应该说是X轴),但它不是对角线。在这里,@user5613506 I已经更改了代码段以匹配所需的输出。请检查。现在我明白你关于Z轴的意思了,但不同的是,当它没有旋转时,前后的运动更加明显。它是否可以是“无限的”,就像它不断地、无休止地旋转一样?@user5613506没有来回运动。这是一个光学错觉,因为元素在Y轴上旋转360度。现在我看了一会儿,我注意到了这一点,但它可以避免吗?我的意思是,当动画开始时,形状曲线在
左上
右下
上,当它们在轴上进行动画时,它们逐渐变为
右上
左下
。这样做的目的是在不改变其原始位置的情况下使环围绕圆旋转,否则在实现时它们可能会与其他环的角碰撞