html - 为什么 CSS transform,translate 会改变旋转元素的旋转？

Question

我有一些旋转的元素，我想平移它们以移动它们的水平位置。然而，当我执行简单的变换/平移时，元素的旋转丢失并设置回原来的状态(没有旋转)。

我通过执行变换/平移/旋转来移动元素来解决这个问题，但我很好奇为什么平移 (x,y) 时旋转会丢失？我使用的是 d3.js，所以它与该库处理转换的方式有关，还是 CSS 自然地执行此操作？

Answer 1

它与每个 css 属性相同。

由于级联的性质，如果您重新定义转换声明，将只应用最新的更改:

.element{
   transform:rotate(angle);
   transform:translate3d(x,y,z);     /* now only the translation will be applied*/
}

为了应用这两种转换，它们需要在一个声明中:

.element{
   transform:rotate(angle) translate3d(x,y,z);
}

由于 D3 使用 CSS 进行转换，以前的将被最新的覆盖。

small Example