2

有谁知道如何使用 CSS3 Webkit translate3d 而不是普通的左 css 和 d3.js。在 iPhone translate3d 上运行得更快，我需要在发布 HTML 元素后的转换中执行此操作。

这是我的左侧 css 代码：

d3.select("#myHTMLElem").transition()
    .style("left", myNewPosX) + "px")
    .duration(500)
    .ease("cubic-in-out")
    .each("end", function(d) {
        // Do something after
});

JQuery 有一些东西，但我更愿意在这个项目中继续使用 d3.js。知道如何使用 translate3d 而不是 left 属性来制作前面的代码吗？

谢谢

4

1 回答 1

6

我就是这样做的。对于平滑/功能转换，请确保在元素上执行转换之前将默认值应用于样式属性。

默认样式（过渡前）：

var svg = d3.select("div#wrapper").append("svg").append("g").attr("id", "usg").attr("style", function () {
    return "-webkit-transform: perspective(800) scale(1) scale3d(1, 1, 1) rotate3d(1, 0, 0, 0deg) translate3d(0, 0, 0);";
});

过渡样式（转换默认值）：

d3.select("#usg").transition().duration(2000).attr("style", function () {
    return "-webkit-transform: perspective(800) scale(1) scale3d(1, 1, 2) rotate3d(1, 0, 0, 55deg) translate3d(0px, 198px, 0px);";
});
于 2012-11-02T18:58:03.087 回答