D3.js 来管理 Webkit translate3d：这可能吗？答案

【问题标题】：D3.js to manage Webkit translate3d : Is that possible?D3.js 来管理 Webkit translate3d：这可能吗？
【发布时间】：2012-06-05 02:16:48
【问题描述】：

有谁知道如何使用 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 属性来制作前面的代码吗？

谢谢

【问题讨论】：

标签： iphone mobile webkit d3.js

【解决方案1】：

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

默认样式（过渡前）：

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);";
});

【讨论】：