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进行转换，以前的转换将被最新的转换。