【发布时间】:2025-12-24 14:15:16
【问题描述】:
我有许多旋转的元素,我想平移它们以改变它们的水平位置。但是,当我执行简单的变换/平移时,元素的旋转丢失并恢复到原来的状态(没有旋转)。
我通过执行变换/平移/旋转来移动元素来解决此问题,但我很好奇为什么在平移 (x,y) 时旋转会丢失?我正在使用 d3.js,那么它与该库如何处理转换有关,还是 CSS 会自然而然地做到这一点?
【问题讨论】:
-
翻译规则可能会覆盖转换规则而不是附加
我有许多旋转的元素,我想平移它们以改变它们的水平位置。但是,当我执行简单的变换/平移时,元素的旋转丢失并恢复到原来的状态(没有旋转)。
我通过执行变换/平移/旋转来移动元素来解决此问题,但我很好奇为什么在平移 (x,y) 时旋转会丢失?我正在使用 d3.js,那么它与该库如何处理转换有关,还是 CSS 会自然而然地做到这一点?
【问题讨论】:
这与每个 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 进行转换,以前的将被最新的覆盖。
【讨论】: