transform的rotate+translate演示

马黑黑

当一个元素进行了绝对定位，可以通过 transform 属性的 rotate 和 translate 的配套设置让它围绕自身原先的定位点做圆弧运动，要求 rotate在前、translate 在后。一般地，translate 的水平方向和垂直方向用一个便可。下面的演示，在改变角度和移动距离时，如果X轴和Y轴保持其中一个处于 0px 的状态，小球最多只有一半突破父元素的圆周边界，但如果XY坐标同时设计非 0 px且较大数值时，小球可能会严重超越父元素的边界。

代码

正

X 轴距离 ：

0

Y 轴距离 ：

0

旋转角度 ：

0

【提示】translate(0px,0px) 可以分开写成 translateX(0px) 和 translateY(0px) 。

马黑黑

要点：

一、运动对象（元素）做绝对定位（position: absolute）；

二、rotate（旋转）+ translate（移位）的顺序不能颠倒。如果不想让元素在运动中旋转，可以考虑下面的做法：

        transform: rotate(30deg) translate(-100px) rotate(-30deg);

这实际上是反向转动，将前面的转动同步抵消，达到的效果是元素没有转动。

三、为方便控制运动对象运动路线，一般保留 translate X、Y坐标参数的其中一个保持 0px 不变；

南无月

看到这贴我第一感觉是：壮观

南无月

马黑黑 发表于 2023-7-3 08:18
要点：

一、运动对象（元素）做绝对定位（position: absolute）；

现在才知道斜着吐泡泡加一个rotate(-45deg)就可以了
从一楼图上看很直观，角度-45,X轴不变，Y轴为-130，这样就是十分完美

刚才跑贴子里试了一下，角度改-45,Y轴的数据0居然不用变，是不是跟粒子定位有关系
from { transform: rotate(-45deg) translateY(0px); opacity: 1; }

红影

“要求 rotate在前、translate 在后。”
这个是指做在帖子里的时候吧，在这里玩的时候，可以先移动translate的XY，然后再rotate，看着小球跑来跑去真好玩

红影

看到月儿的话，才发现那个吐泡泡的帖子没完全看懂，我去那边问一下吧。

马黑黑

红影 发表于 2023-7-3 10:12
“要求 rotate在前、translate 在后。”
这个是指做在帖子里的时候吧，在这里玩的时候，可以先移动transla ...

那倒也是

马黑黑

南无月 发表于 2023-7-3 09:32
看到这贴我第一感觉是：壮观

壮观而美，简称壮美

马黑黑

南无月 发表于 2023-7-3 09:49
现在才知道斜着吐泡泡加一个rotate(-45deg)就可以了
从一楼图上看很直观，角度-45,X轴不变，Y轴为-130， ...

那里是关键帧动画，from ... to ... 或 百分比表示法，translate 的值若有前后变化，它就会移动。前后没有变化，单单旋转多少度，都是在原地旋转。

运动对象的原始 left 和 top 值，会影响运动形态。

马黑黑

红影 发表于 2023-7-3 10:51
看到月儿的话，才发现那个吐泡泡的帖子没完全看懂，我去那边问一下吧。

樵歌

俺乱设置一通，那小球倒也听话，跟着乱跑一气

马黑黑

樵歌 发表于 2023-7-3 15:59
俺乱设置一通，那小球倒也听话，跟着乱跑一气

好玩吧

南无月

马黑黑 发表于 2023-7-3 11:45
壮观而美，简称壮美

壮观壮美，加了壮字就大气了起来。。壮黑黑

南无月

马黑黑 发表于 2023-7-3 11:47
那里是关键帧动画，from ... to ... 或 百分比表示法，translate 的值若有前后变化，它就会移动。前后没 ...

我觉得贴子里的原始值起了决定性作用

马黑黑

南无月 发表于 2023-7-3 18:09
我觉得贴子里的原始值起了决定性作用

有时候，关键帧只用  to ，说明有原始的值

马黑黑

南无月 发表于 2023-7-3 18:09
壮观壮美，加了壮字就大气了起来。。壮黑黑

一般只说壮黑或黑壮

红影

马黑黑 发表于 2023-7-3 11:44
那倒也是

让那小球转了好多圈，特别好玩儿。

红影

马黑黑 发表于 2023-7-3 11:47

谢谢黑黑耐心解答。

马黑黑

红影 发表于 2023-7-3 20:21
谢谢黑黑耐心解答。

继续喝水

马黑黑

红影 发表于 2023-7-3 20:20
让那小球转了好多圈，特别好玩儿。

每一次的改变，它会从上一次的位置过渡到下一次的位置，用时总是两秒，这是 transition 的功劳