CSS中的累积转换

时间:2014-08-20 14:44:47

标签: html css rotation

如果我旋转已设置原点的div然后将原点设置为其他值并应用另一个旋转,则只能看到第二个旋转。 我知道这是因为旋转总是从元素的原始位置完成而不应用变换。

我如何执行第二次旋转,以便相对于第一次旋转应用它但具有新原点?

1 个答案:

答案 0 :(得分:2)

好的,我终于找到了实现我想要的方法。您必须通过将所有转换转换并组合到一个要转换的调用中手动更改原点,以便平移和旋转创建一个转换矩阵,因此是累积的。

因此,例如,如果您想要在12,32左右旋转30度,然后在100,78左右旋转20度,您可以这样做:

#element{
    transform: translate(-12,-32) rotate(30deg) translate(12,32) translate(-100, -78) rotate(20deg) translate(100, 78);
}