为什么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