为啥 CSS transform,translate 会改变旋转元素的旋转？

Posted 2023-03-14

【中文标题】为啥 CSS transform,translate 会改变旋转元素的旋转？

【英文标题】：Why does a CSS transform,translate change the rotation for rotated elements?为什么 CSS transform,translate 会改变旋转元素的旋转？

【发布时间】：2013-02-13 16:26:33

【问题描述】：

我有许多旋转的元素，我想平移它们以改变它们的水平位置。但是，当我执行简单的变换/平移时，元素的旋转丢失并恢复到原来的状态（没有旋转）。

我通过执行变换/平移/旋转来移动元素来解决此问题，但我很好奇为什么在平移 (x,y) 时旋转会丢失？我正在使用 d3.js，那么它与该库如何处理转换有关，还是 CSS 会自然而然地做到这一点？

【问题讨论】：

翻译规则可能会覆盖转换规则而不是附加

【参考方案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