iphone - D3.js to manage Webkit translate3d : Is that possible? -
does know how use css3 webkit translate3d instead of normal left css d3.js. on iphone translate3d run faster , need on transition after release of html element.
here code left css :
d3.select("#myhtmlelem").transition() .style("left", mynewposx) + "px") .duration(500) .ease("cubic-in-out") .each("end", function(d) { // after }); there jquery, prefer keep using d3.js project. idea how make previous code using translate3d instead of left property?
thanks
this how it. smooth/functional transition, make sure apply default values style attribute before transition executed on element.
default style (before transition):
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);"; }); transition style (transform default values):
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);"; });
Comments
Post a Comment