Source: https://d3js.org/d3-interpolate/transform

Skip to content

Return to top

Transform interpolation ​

===============================================================================================

Interpolators for CSS and SVG transforms. The interpolation method is standardized by CSS: see matrix decomposition for animation .

interpolateTransformCss(a, b) ​

---

js

d3.interpolateTransformCss("translateY(12px) scale(2)", "translateX(30px) rotate(5deg)")(0.5) // "translate(15px,6px) rotate(2.5deg) scale(1.5,1.5)"

Examples · Source · Returns an interpolator between the two 2D CSS transforms represented by a and b. Each transform is decomposed to a standard representation of translate, rotate, x-skew and scale; these component transformations are then interpolated.

interpolateTransformSvg(a, b) ​

---

js

d3.interpolateTransformSvg("skewX(-60)", "skewX(60) translate(280,0)") // "translate(140,0) skewX(0)"

Examples · Source · Returns an interpolator between the two 2D SVG transforms represented by a and b. Each transform is decomposed to a standard representation of translate, rotate, x-skew and scale; these component transformations are then interpolated.