Use DOMMatrix to parse CSS transforms.

src/transform/parse.js

@@ -1,18 +1,11 @@
 import decompose, {identity} from "./decompose.js";
 
-var cssNode,
-    cssRoot,
-    cssView,
-    svgNode;
+var svgNode;
 
+/* eslint-disable no-undef */
 export function parseCss(value) {
-  if (value === "none") return identity;
-  if (!cssNode) cssNode = document.createElement("DIV"), cssRoot = document.documentElement, cssView = document.defaultView;
-  cssNode.style.transform = value;
-  value = cssView.getComputedStyle(cssRoot.appendChild(cssNode), null).getPropertyValue("transform");
-  cssRoot.removeChild(cssNode);
-  value = value.slice(7, -1).split(",");
-  return decompose(+value[0], +value[1], +value[2], +value[3], +value[4], +value[5]);
+  const m = new (typeof DOMMatrix === "function" ? DOMMatrix : WebKitCSSMatrix)(value + "");
+  return m.isIdentity ? identity : decompose(m.a, m.b, m.c, m.d, m.e, m.f);
 }
 
 export function parseSvg(value) {

test/transformCss-test.js

@@ -0,0 +1,26 @@
+var tape = require("tape"),
+    interpolate = require("../");
+
+/*
+
+// see https://github.com/d3/d3-interpolate/pull/83
+// and https://github.com/Automattic/node-canvas/issues/1313
+global.DOMMatrix = require("Canvas").DOMMatrix;
+
+tape("interpolateTransformCss(a, b) transforms as expected", function(test) {
+  test.equal(interpolate.interpolateTransformCss(
+    "translateY(12px) scale(2)",
+    "translateX(3em) rotate(5deg)"
+  )(0.5), "translate(24px, 6px) rotate(2.5deg) scale(1.5,1.5)");
+  test.deepEqual(interpolate.interpolateTransformCss(
+    "matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)",
+    "translate(3px,90px)"
+  )(0.5), "translate(4px, 48px) rotate(-58.282525588538995deg) skewX(-39.847576765616985deg) scale(-0.6180339887498949,0.9472135954999579)");
+  test.deepEqual(interpolate.interpolateTransformCss(
+    "skewX(-60)",
+    "skewX(60) translate(280,0)"
+  )(0.5), "translate(140, 0) skewX(0)");
+  test.end();
+});
+
+*/