CSS：小球在圆圈轨道上运动

加林森

马黑黑 发表于 2022-2-27 19:03
谢茶

不客气

红影

马黑黑 发表于 2022-2-27 19:21
你试试120的外圆看看，padding值为10，直径应加到20

其实我最迷糊的就是直径问题。没明白那个ransform-origin到底是直径还是圆心定位。其他的也看不出哪个是定义直径的啊。

马黑黑

红影 发表于 2022-2-27 21:05
其实我最迷糊的就是直径问题。没明白那个ransform-origin到底是直径还是圆心定位。其他的也看不出哪个是 ...

圆心的xy坐标值。当不定义transform-origin时，xy坐标值时元素的圆心

红影

马黑黑 发表于 2022-2-27 21:15
圆心的xy坐标值。当不定义transform-origin时，xy坐标值时元素的圆心

所以，当规定了这值，等于也给出半径了？

马黑黑

红影 发表于 2022-2-27 22:34
所以，当规定了这值，等于也给出半径了？

是的。圆心定下来意味着它的转动围绕着新的xy坐标值，它的初始时位置到圆心的距离极为它的运动半径

红影

马黑黑 发表于 2022-2-27 22:37
是的。圆心定下来意味着它的转动围绕着新的xy坐标值，它的初始时位置到圆心的距离极为它的运动半径

“它的初始时位置到圆心的距离极为它的运动半径”嗯嗯，看到这句，明白了

马黑黑

红影 发表于 2022-2-28 10:59
“它的初始时位置到圆心的距离极为它的运动半径”嗯嗯，看到这句，明白了

另外来讲，我只是把小球垂直推进轨道，并不是沿着45度角的方向。可以在父盒子处于矩形的状态下测试：将小球垂直推进，left值不变，小球将在推进多少个像素进入轨道

红影

                               
登录/注册后可看大图

原来三者的初始位置是这样，怪不得transform-origin时的xy不一样，我还以为在45度上呢，原来不是。

马黑黑

红影 发表于 2022-2-28 11:26
原来三者的初始位置是这样，怪不得transform-origin时的xy不一样，我还以为在45度上呢，原来不是。

所谓隔行如隔山，这回认证了吧

红影

马黑黑 发表于 2022-2-28 12:14
所谓隔行如隔山，这回认证了吧

是啊，彻底输给这个代码了

红影

马黑黑 发表于 2022-2-28 11:07
另外来讲，我只是把小球垂直推进轨道，并不是沿着45度角的方向。可以在父盒子处于矩形的状态下测试：将小 ...

这个没试过，不知道是怎样的推进方式

马黑黑

红影 发表于 2022-2-28 19:02
这个没试过，不知道是怎样的推进方式

如果你做过宇航员，这个就不用解释了

马黑黑

红影 发表于 2022-2-28 18:39
是啊，彻底输给这个代码了

其实也不是输给代码，是处置的方式不同。我看得出，canvas画直线，你就画得很好，这是因为与你常用的软件工作原理相似，你能理解并很快掌握。原理极其重要，能理解原理，就什么都不难。

红影

马黑黑 发表于 2022-2-28 19:04
如果你做过宇航员，这个就不用解释了

关键是我没做过啊

红影

马黑黑 发表于 2022-2-28 19:14
其实也不是输给代码，是处置的方式不同。我看得出，canvas画直线，你就画得很好，这是因为与你常用的软件 ...

是的，这个一开始小球的圆心没找对，后来是对Y轴怎么都难以理解，所以迷糊到现在

马黑黑

红影 发表于 2022-2-28 20:34
是的，这个一开始小球的圆心没找对，后来是对Y轴怎么都难以理解，所以迷糊到现在

圆周的东东本来就不太好理解的

马黑黑

红影 发表于 2022-2-28 20:33
关键是我没做过啊

就是呀，很麻烦的。就像熊不吃玉米，你硬要他去采摘玉米棒，结果猴子不高兴了

红影

马黑黑 发表于 2022-2-28 21:29
圆周的东东本来就不太好理解的

其实也简单，圆心和半径定了，圆就跑不掉。半径的数据肯定是确定的，关键找圆心。不明白的是圆心的表述感觉和半径关联。按照空间概念，半径必须是55才能到那个轨道上。

红影

马黑黑 发表于 2022-2-28 21:30
就是呀，很麻烦的。就像熊不吃玉米，你硬要他去采摘玉米棒，结果猴子不高兴了

猴子不高兴没事，猴子打架打不过熊。

马黑黑

红影 发表于 2022-3-1 11:23
猴子不高兴没事，猴子打架打不过熊。

它们两个物种是世交，俄罗斯和白俄罗斯的关系一样