dommatrix - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/dommatrix.esm.js

 /*!
-* DOMMatrix v0.0.9 (https://thednp.github.io/dommatrix)
+* DOMMatrix v0.0.10 (https://thednp.github.io/DOMMatrix/)
 * Copyright 2021 © thednp
@@ -7,6 +7,6 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)
 // DOMMatrix Static methods
-// * `fromFloat64Array` and `fromFloat32Array` methods are not supported
-// * `fromArray` a much more friendly implementation, should also accept float32Array/ float64Array
-// * `fromMatrix` is also implemented to facilitate easy instance cloning capability
-// * `fromString` is a very helpful utility
+// * `fromFloat64Array` and `fromFloat32Array` methods are not supported;
+// * `fromArray` a more simple implementation, should also accept float[32/64]Array;
+// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance;
+// * `fromString` parses and loads values from any valid CSS transform string.
 
@@ -19,7 +19,7 @@ /**
  *
- * @param {CSSMatrix} m identity matrix.
  * @param {Number[]} array an `Array` to feed values from.
  * @return {CSSMatrix} the resulted matrix.
  */
-function fromArray(m, array) {
+function fromArray(array) {
+  const m = new CSSMatrix();
   const a = Array.from(array);
@@ -64,3 +64,3 @@
   } else if (a.length === 6) {
-    const [m11, m12, m21, m22, m14, m24] = a;
+    const [m11, m12, m21, m22, m41, m42] = a;
 
@@ -79,7 +79,7 @@ m.m11 = m11;
 
-    m.m14 = m14;
-    m.e = m14;
+    m.m41 = m41;
+    m.e = m41;
 
-    m.m24 = m24;
-    m.f = m24;
+    m.m42 = m42;
+    m.f = m42;
   } else {
@@ -95,12 +95,12 @@ throw new TypeError('CSSMatrix: expecting a 6/16 values Array');
  *
- * @param {CSSMatrix} target the identity matrix.
- * @param {CSSMatrix} m the source `CSSMatrix` initialization to feed values from.
+ * @param {CSSMatrix | DOMMatrix} m the source matrix to feed values from.
  * @return {CSSMatrix} the resulted matrix.
  */
-function fromMatrix(target, m) {
-  return fromArray(target,
+function fromMatrix(m) {
+  return fromArray(
     [m.m11, m.m12, m.m13, m.m14,
       m.m21, m.m22, m.m23, m.m24,
       m.m31, m.m32, m.m33, m.m34,
-      m.m41, m.m42, m.m43, m.m44]);
+      m.m41, m.m42, m.m43, m.m44],
+  );
 }
@@ -114,47 +114,52 @@
  *
- * @param {CSSMatrix} target identity matrix.
  * @param {string} source valid CSS transform string syntax.
  * @return {CSSMatrix} the resulted matrix.
  */
-function fromString(target, source) {
-  const str = String(source).trim();
-  const deg = 180 / Math.PI;
-  const identity = Object.assign(Object.create(target), target);
-  let m = Object.assign(Object.create(target), target);
-  const tramsformObject = str.replace(/\s/g, '').split(')').filter((f) => f);
+function fromString(source) {
+  const str = String(source).replace(/\s/g, '');
+  let m = new CSSMatrix();
+  let is2D = true;
+  const tramsformObject = str.split(')').filter((f) => f).map((fn) => {
+    const [prop, value] = fn.split('(');
+    const components = value.split(',')
+      .map((n) => (n.includes('rad') ? parseFloat(n) * (180 / Math.PI) : parseFloat(n)));
+    const [x, y, z, a] = components;
 
+    // don't add perspective if is2D
+    if (prop === 'matrix3d'
+        || (prop === 'rotate3d' && [x, y].every((n) => !Number.isNaN(+n) && n !== 0) && a)
+        || (['rotateX', 'rotateY'].includes(prop) && x)
+        || (prop === 'translate3d' && [x, y, z].every((n) => !Number.isNaN(+n)) && z)
+        || (prop === 'scale3d' && [x, y, z].every((n) => !Number.isNaN(+n) && n !== x))
+    ) {
+      is2D = false;
+    }
+    return { prop, components };
+  });
+
   tramsformObject.forEach((tf) => {
-    const [prop, value] = tf.split('(');
-    const [x, y, z, a] = value.split(',')
-      .map((n) => (n.includes('rad') ? parseFloat(n) * deg : parseFloat(n)));
+    const { prop, components } = tf;
+    const [x, y, z, a] = components;
     const xyz = [x, y, z];
     const xyza = [x, y, z, a];
 
-    if (prop === 'perspective') {
+    if (prop === 'perspective' && !is2D) {
       m.m34 = -1 / x;
     } else if (prop.includes('matrix')) {
-      const values = value.split(',').map(parseFloat)
-        .map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
-
-      if ([6, 16].indexOf(values.length) > -1) {
-        m = m.multiply(fromArray(identity, values));
+      const values = components.map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
+      if ([6, 16].includes(values.length)) {
+        m = m.multiply(fromArray(values));
       }
     } else if (['translate', 'translate3d'].some((p) => prop === p) && x) {
       m = m.translate(x, y || 0, z || 0);
-    } else if (prop === 'rotate3d' && xyza.every((n) => typeof n === 'number') && a) {
+    } else if (prop === 'rotate3d' && xyza.every((n) => !Number.isNaN(+n)) && a) {
       m = m.rotateAxisAngle(x, y, z, a);
-    } else if (prop === 'scale3d' && xyz.every((n) => typeof n === 'number') && xyz.some((n) => n !== 1)) {
-      const s3x = x !== 1 ? x : 1;
-      const s3y = y !== 1 ? y : 1;
-      const s3z = z !== 1 ? z : 1;
-      m = m.scale(s3x, s3y, s3z);
+    } else if (prop === 'scale3d' && xyz.every((n) => !Number.isNaN(+n)) && xyz.some((n) => n !== 1)) {
+      m = m.scale(x, y, z);
     } else if (prop === 'rotate' && x) {
       m = m.rotate(0, 0, x);
-    } else if (prop === 'scale' && typeof x === 'number' && x !== 1) {
-      const nosy = typeof y === 'undefined';
-      const sx = x === 1 ? 1 : x;
-      let sy = nosy ? sx : y;
-      sy = sy === 1 ? 1 : sy;
-      const sz = nosy ? sx : 1;
-      m = m.scale(sx, sy, sz);
+    } else if (prop === 'scale' && !Number.isNaN(x) && x !== 1) {
+      const nosy = Number.isNaN(+y);
+      const sy = nosy ? x : y;
+      m = m.scale(x, sy, 1);
     } else if (prop === 'skew' && (x || y)) {
@@ -165,13 +170,14 @@ m = x ? m.skewX(x) : m;
       if (prop.includes('skew')) {
+        // @ts-ignore unfortunately
         m = m[prop](x);
       } else {
         const fn = prop.replace(/[XYZ]/, '');
-        const axes3d = ['X', 'Y', 'Z'];
         const axis = prop.replace(fn, '');
-        const idx = axes3d.indexOf(axis);
-        const components = [
+        const idx = ['X', 'Y', 'Z'].indexOf(axis);
+        const axeValues = [
           idx === 0 ? x : 0,
           idx === 1 ? x : 0,
           idx === 2 ? x : 0];
-        m = m[fn](...components);
+        // @ts-ignore unfortunately
+        m = m[fn](...axeValues);
       }
@@ -181,3 +187,3 @@ }
 
-  return fromMatrix(target, m);
+  return m;
 }
@@ -194,3 +200,2 @@
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` position.
@@ -201,3 +206,4 @@ * @param {Number} y the `y-axis` position.
  */
-function Translate(m, x, y, z) {
+function Translate(x, y, z) {
+  const m = new CSSMatrix();
   m.m41 = x;
@@ -216,3 +222,2 @@ m.e = x;
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} rx the `x-axis` rotation.
@@ -223,3 +228,4 @@ * @param {Number} ry the `y-axis` rotation.
  */
-function Rotate(m, rx, ry, rz) {
+function Rotate(rx, ry, rz) {
+  const m = new CSSMatrix();
   const degToRad = Math.PI / 180;
@@ -272,3 +278,2 @@ const radX = rx * degToRad;
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` vector length.
@@ -280,3 +285,4 @@ * @param {Number} y the `y-axis` vector length.
  */
-function RotateAxisAngle(m, x, y, z, alpha) {
+function RotateAxisAngle(x, y, z, alpha) {
+  const m = new CSSMatrix();
   const angle = alpha * (Math.PI / 360);
@@ -338,3 +344,2 @@ const sinA = Math.sin(angle);
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` scale.
@@ -345,3 +350,4 @@ * @param {Number} y the `y-axis` scale.
  */
-function Scale(m, x, y, z) {
+function Scale(x, y, z) {
+  const m = new CSSMatrix();
   m.m11 = x;
@@ -363,7 +369,7 @@ m.a = x;
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} angle the angle in degrees.
  * @return {CSSMatrix} the resulted matrix.
  */
-function SkewX(m, angle) {
+function SkewX(angle) {
+  const m = new CSSMatrix();
   const radA = (angle * Math.PI) / 180;
@@ -382,7 +388,7 @@ const t = Math.tan(radA);
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} angle the angle in degrees.
  * @return {CSSMatrix} the resulted matrix.
  */
-function SkewY(m, angle) {
+function SkewY(angle) {
+  const m = new CSSMatrix();
   const radA = (angle * Math.PI) / 180;
@@ -399,3 +405,2 @@ const t = Math.tan(radA);
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {CSSMatrix} m1 the first matrix.
@@ -405,3 +410,3 @@ * @param {CSSMatrix} m2 the second matrix.
  */
-function Multiply(m, m1, m2) {
+function Multiply(m1, m2) {
   const m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41;
@@ -427,7 +432,8 @@ const m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42;
 
-  return fromArray(m,
+  return fromArray(
     [m11, m12, m13, m14,
       m21, m22, m23, m24,
       m31, m32, m33, m34,
-      m41, m42, m43, m44]);
+      m41, m42, m43, m44],
+  );
 }
@@ -446,5 +452,7 @@
    * @constructor
-   * @param {any} args
-   * accepts valid CSS transform string, CSSMatrix/DOMMatrix instance or an *Array*
-   * number[] | string | CSSMatrix | DOMMatrix | undefined
+   * @param {any} args accepts all possible parameter configuration:
+   * * Types: number[] | string | CSSMatrix | DOMMatrix | undefined
+   * * valid CSS transform string,
+   * * CSSMatrix/DOMMatrix instance
+   * * a 6/16 elements *Array*
    */
@@ -473,3 +481,3 @@ constructor(...args) {
       }
-      m.setMatrixValue(ARGS);
+      return m.setMatrixValue(ARGS);
     }
@@ -535,2 +543,3 @@ return m;
    * @param {String[] | Number[] | String | CSSMatrix | DOMMatrix} source
+   * @return {CSSMatrix} a new matrix
    * can be one of the following
@@ -547,10 +556,10 @@ * * valid CSS matrix string,
       // @ts-ignore
-      fromMatrix(m, source);
+      return fromMatrix(source);
     // CSS transform string source
     } if (typeof source === 'string' && source.length && source !== 'none') {
-      fromString(m, source);
+      return fromString(source);
     // [Arguments list | Array] come here
     } if (Array.isArray(source)) {
       // @ts-ignore
-      fromArray(m, source);
+      return fromArray(source);
     }
@@ -605,2 +614,16 @@ return m;
   /**
+   * Returns a JSON representation of the `CSSMatrix` object, a standard *Object*
+   * that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and
+   * excludes `is2D` & `isIdentity` properties.
+   *
+   * The result can also be used as a second parameter for the `fromMatrix` static method
+   * to load values into a matrix instance.
+   *
+   * @return {Object} an *Object* with all matrix values.
+   */
+  toJSON() {
+    return JSON.parse(JSON.stringify(this));
+  }
+
+  /**
    * The Multiply method returns a new CSSMatrix which is the result of this
@@ -614,4 +637,3 @@ * matrix multiplied by the passed matrix, with the passed matrix to the right.
   multiply(m2) {
-    const identity = new CSSMatrix();
-    return Multiply(identity, this, m2);
+    return Multiply(this, m2);
   }
@@ -631,4 +653,2 @@
   translate(x, y, z) {
-    const identity = new CSSMatrix();
-    const translate = new CSSMatrix();
     const X = x;
@@ -639,3 +659,3 @@ let Y = y;
     if (Y == null) Y = 0;
-    return Multiply(identity, this, Translate(translate, X, Y, Z));
+    return Multiply(this, Translate(X, Y, Z));
   }
@@ -655,4 +675,2 @@
   scale(x, y, z) {
-    const identity = new CSSMatrix();
-    const scale = new CSSMatrix();
     const X = x;
@@ -664,3 +682,3 @@ let Y = y;
 
-    return Multiply(identity, this, Scale(scale, X, Y, Z));
+    return Multiply(this, Scale(X, Y, Z));
   }
@@ -681,4 +699,2 @@
   rotate(rx, ry, rz) {
-    const identity = new CSSMatrix();
-    const rotation = new CSSMatrix();
     let RX = rx;
@@ -689,3 +705,3 @@ let RY = ry;
     if (RZ == null) { RZ = RX; RX = 0; }
-    return Multiply(identity, this, Rotate(rotation, RX, RY, RZ));
+    return Multiply(this, Rotate(RX, RY, RZ));
   }
@@ -709,5 +725,3 @@
     }
-    const identity = new CSSMatrix();
-    const arx = new CSSMatrix();
-    return Multiply(identity, this, RotateAxisAngle(arx, x, y, z, angle));
+    return Multiply(this, RotateAxisAngle(x, y, z, angle));
   }
@@ -723,5 +737,3 @@
   skewX(angle) {
-    const identity = new CSSMatrix();
-    const skx = new CSSMatrix();
-    return Multiply(identity, this, SkewX(skx, angle));
+    return Multiply(this, SkewX(angle));
   }
@@ -737,5 +749,3 @@
   skewY(angle) {
-    const identity = new CSSMatrix();
-    const sky = new CSSMatrix();
-    return Multiply(identity, this, SkewY(sky, angle));
+    return Multiply(this, SkewY(angle));
   }
@@ -757,5 +767,4 @@
   transformPoint(v) {
-    const identity = new CSSMatrix();
     const M = this;
-    let m = Translate(identity, v.x, v.y, v.z);
+    let m = Translate(v.x, v.y, v.z);
 
@@ -762,0 +771,0 @@ m.m44 = v.w || 1;

dist/dommatrix.esm.min.js

@@ -1,2 +0,2 @@
-// DOMMatrix v0.0.9 | thednp © 2021 | MIT-License
-function m(m,t){const e=Array.from(t);if(16===e.length){const[t,n,s,r,a,i,o,l,c,u,f,h,w,y,p,M]=e;m.m11=t,m.a=t,m.m21=a,m.c=a,m.m31=c,m.m41=w,m.e=w,m.m12=n,m.b=n,m.m22=i,m.d=i,m.m32=u,m.m42=y,m.f=y,m.m13=s,m.m23=o,m.m33=f,m.m43=p,m.m14=r,m.m24=l,m.m34=h,m.m44=M}else{if(6!==e.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");{const[t,n,s,r,a,i]=e;m.m11=t,m.a=t,m.m12=n,m.b=n,m.m21=s,m.c=s,m.m22=r,m.d=r,m.m14=a,m.e=a,m.m24=i,m.f=i}}return m}function t(t,e){return m(t,[e.m11,e.m12,e.m13,e.m14,e.m21,e.m22,e.m23,e.m24,e.m31,e.m32,e.m33,e.m34,e.m41,e.m42,e.m43,e.m44])}function e(e,n){const s=String(n).trim(),r=180/Math.PI,a=Object.assign(Object.create(e),e);let i=Object.assign(Object.create(e),e);return s.replace(/\s/g,"").split(")").filter(m=>m).forEach(t=>{const[e,n]=t.split("("),[s,o,l,c]=n.split(",").map(m=>m.includes("rad")?parseFloat(m)*r:parseFloat(m)),u=[s,o,l],f=[s,o,l,c];if("perspective"===e)i.m34=-1/s;else if(e.includes("matrix")){const t=n.split(",").map(parseFloat).map(m=>Math.abs(m)<1e-6?0:m);[6,16].indexOf(t.length)>-1&&(i=i.multiply(m(a,t)))}else if(["translate","translate3d"].some(m=>e===m)&&s)i=i.translate(s,o||0,l||0);else if("rotate3d"===e&&f.every(m=>"number"==typeof m)&&c)i=i.rotateAxisAngle(s,o,l,c);else if("scale3d"===e&&u.every(m=>"number"==typeof m)&&u.some(m=>1!==m)){const m=1!==s?s:1,t=1!==o?o:1,e=1!==l?l:1;i=i.scale(m,t,e)}else if("rotate"===e&&s)i=i.rotate(0,0,s);else if("scale"===e&&"number"==typeof s&&1!==s){const m=void 0===o,t=1===s?1:s;let e=m?t:o;e=1===e?1:e;const n=m?t:1;i=i.scale(t,e,n)}else if("skew"===e&&(s||o))i=s?i.skewX(s):i,i=o?i.skewY(o):i;else if(/[XYZ]/.test(e)&&s)if(e.includes("skew"))i=i[e](s);else{const m=e.replace(/[XYZ]/,""),t=["X","Y","Z"],n=e.replace(m,""),r=t.indexOf(n),a=[0===r?s:0,1===r?s:0,2===r?s:0];i=i[m](...a)}}),t(e,i)}function n(m,t,e,n){return m.m41=t,m.e=t,m.m42=e,m.f=e,m.m43=n,m}function s(m,t,e,n){const s=Math.PI/180,r=t*s,a=e*s,i=n*s,o=Math.cos(r),l=-Math.sin(r),c=Math.cos(a),u=-Math.sin(a),f=Math.cos(i),h=-Math.sin(i),w=c*f,y=-c*h;m.m11=w,m.a=w,m.m12=y,m.b=y,m.m13=u;const p=l*u*f+o*h;m.m21=p,m.c=p;const M=o*f-l*u*h;return m.m22=M,m.d=M,m.m23=-l*c,m.m31=l*h-o*u*f,m.m32=l*f+o*u*h,m.m33=o*c,m}function r(m,t,e,n,s){const r=s*(Math.PI/360),a=Math.sin(r),i=Math.cos(r),o=a*a,l=Math.sqrt(t*t+e*e+n*n);let c=t,u=e,f=n;0===l?(c=0,u=0,f=1):(c/=l,u/=l,f/=l);const h=c*c,w=u*u,y=f*f,p=1-2*(w+y)*o;m.m11=p,m.a=p;const M=2*(c*u*o+f*a*i);m.m12=M,m.b=M,m.m13=2*(c*f*o-u*a*i);const x=2*(u*c*o-f*a*i);m.m21=x,m.c=x;const d=1-2*(y+h)*o;return m.m22=d,m.d=d,m.m23=2*(u*f*o+c*a*i),m.m31=2*(f*c*o+u*a*i),m.m32=2*(f*u*o-c*a*i),m.m33=1-2*(h+w)*o,m}function a(m,t,e,n){return m.m11=t,m.a=t,m.m22=e,m.d=e,m.m33=n,m}function i(m,t){const e=t*Math.PI/180,n=Math.tan(e);return m.m21=n,m.c=n,m}function o(m,t){const e=t*Math.PI/180,n=Math.tan(e);return m.m12=n,m.b=n,m}function l(t,e,n){return m(t,[n.m11*e.m11+n.m12*e.m21+n.m13*e.m31+n.m14*e.m41,n.m11*e.m12+n.m12*e.m22+n.m13*e.m32+n.m14*e.m42,n.m11*e.m13+n.m12*e.m23+n.m13*e.m33+n.m14*e.m43,n.m11*e.m14+n.m12*e.m24+n.m13*e.m34+n.m14*e.m44,n.m21*e.m11+n.m22*e.m21+n.m23*e.m31+n.m24*e.m41,n.m21*e.m12+n.m22*e.m22+n.m23*e.m32+n.m24*e.m42,n.m21*e.m13+n.m22*e.m23+n.m23*e.m33+n.m24*e.m43,n.m21*e.m14+n.m22*e.m24+n.m23*e.m34+n.m24*e.m44,n.m31*e.m11+n.m32*e.m21+n.m33*e.m31+n.m34*e.m41,n.m31*e.m12+n.m32*e.m22+n.m33*e.m32+n.m34*e.m42,n.m31*e.m13+n.m32*e.m23+n.m33*e.m33+n.m34*e.m43,n.m31*e.m14+n.m32*e.m24+n.m33*e.m34+n.m34*e.m44,n.m41*e.m11+n.m42*e.m21+n.m43*e.m31+n.m44*e.m41,n.m41*e.m12+n.m42*e.m22+n.m43*e.m32+n.m44*e.m42,n.m41*e.m13+n.m42*e.m23+n.m43*e.m33+n.m44*e.m43,n.m41*e.m14+n.m42*e.m24+n.m43*e.m34+n.m44*e.m44])}class c{constructor(...m){const t=this;if(t.a=1,t.b=0,t.c=0,t.d=1,t.e=0,t.f=0,t.m11=1,t.m12=0,t.m13=0,t.m14=0,t.m21=0,t.m22=1,t.m23=0,t.m24=0,t.m31=0,t.m32=0,t.m33=1,t.m34=0,t.m41=0,t.m42=0,t.m43=0,t.m44=1,m&&m.length){let e=m;m instanceof Array&&(m[0]instanceof Array&&[16,6].includes(m[0].length)||"string"==typeof m[0]||[c,DOMMatrix].some(t=>m[0]instanceof t))&&([e]=m),t.setMatrixValue(e)}return t}set isIdentity(m){this.isIdentity=m}get isIdentity(){const m=this;return 1===m.m11&&0===m.m12&&0===m.m13&&0===m.m14&&0===m.m21&&1===m.m22&&0===m.m23&&0===m.m24&&0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m41&&0===m.m42&&0===m.m43&&1===m.m44}get is2D(){const m=this;return 0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m43&&1===m.m44}set is2D(m){this.is2D=m}setMatrixValue(n){const s=this;return[DOMMatrix,c].some(m=>n instanceof m)&&t(s,n),"string"==typeof n&&n.length&&"none"!==n&&e(s,n),Array.isArray(n)&&m(s,n),s}toString(){const m=this.toArray().join(",");return`${this.is2D?"matrix":"matrix3d"}(${m})`}toArray(){const m=this;let t;return t=m.is2D?[m.a,m.b,m.c,m.d,m.e,m.f]:[m.m11,m.m12,m.m13,m.m14,m.m21,m.m22,m.m23,m.m24,m.m31,m.m32,m.m33,m.m34,m.m41,m.m42,m.m43,m.m44],t.map(m=>Math.abs(m)<1e-6?0:(m*10**6>>0)/10**6)}multiply(m){return l(new c,this,m)}translate(m,t,e){let s=t,r=e;return null==r&&(r=0),null==s&&(s=0),l(new c,this,n(new c,m,s,r))}scale(m,t,e){let n=t,s=e;return null==n&&(n=m),null==s&&(s=m),l(new c,this,a(new c,m,n,s))}rotate(m,t,e){let n=m,r=t,a=e;return null==r&&(r=0),null==a&&(a=n,n=0),l(new c,this,s(new c,n,r,a))}rotateAxisAngle(m,t,e,n){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return l(new c,this,r(new c,m,t,e,n))}skewX(m){return l(new c,this,i(new c,m))}skewY(m){return l(new c,this,o(new c,m))}transformPoint(m){let t=n(new c,m.x,m.y,m.z);return t.m44=m.w||1,t=this.multiply(t),{x:t.m41,y:t.m42,z:t.m43,w:t.m44}}transform(m){const t=this,e=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,n=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,s=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,r=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:e/r,y:n/r,z:s/r,w:r}}}c.Translate=n,c.Rotate=s,c.RotateAxisAngle=r,c.Scale=a,c.SkewX=i,c.SkewY=o,c.Multiply=l,c.fromArray=m,c.fromMatrix=t,c.fromString=e;export{c as default};
+// DOMMatrix v0.0.10 | thednp © 2021 | MIT-License
+function m(m){const t=new c,e=Array.from(m);if(16===e.length){const[m,n,r,s,a,i,o,l,c,u,h,f,y,p,M,d]=e;t.m11=m,t.a=m,t.m21=a,t.c=a,t.m31=c,t.m41=y,t.e=y,t.m12=n,t.b=n,t.m22=i,t.d=i,t.m32=u,t.m42=p,t.f=p,t.m13=r,t.m23=o,t.m33=h,t.m43=M,t.m14=s,t.m24=l,t.m34=f,t.m44=d}else{if(6!==e.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");{const[m,n,r,s,a,i]=e;t.m11=m,t.a=m,t.m12=n,t.b=n,t.m21=r,t.c=r,t.m22=s,t.d=s,t.m41=a,t.e=a,t.m42=i,t.f=i}}return t}function t(t){return m([t.m11,t.m12,t.m13,t.m14,t.m21,t.m22,t.m23,t.m24,t.m31,t.m32,t.m33,t.m34,t.m41,t.m42,t.m43,t.m44])}function e(t){const e=String(t).replace(/\s/g,"");let n=new c,r=!0;return e.split(")").filter(m=>m).map(m=>{const[t,e]=m.split("("),n=e.split(",").map(m=>m.includes("rad")?parseFloat(m)*(180/Math.PI):parseFloat(m)),[s,a,i,o]=n;return("matrix3d"===t||"rotate3d"===t&&[s,a].every(m=>!Number.isNaN(+m)&&0!==m)&&o||["rotateX","rotateY"].includes(t)&&s||"translate3d"===t&&[s,a,i].every(m=>!Number.isNaN(+m))&&i||"scale3d"===t&&[s,a,i].every(m=>!Number.isNaN(+m)&&m!==s))&&(r=!1),{prop:t,components:n}}).forEach(t=>{const{prop:e,components:s}=t,[a,i,o,l]=s,c=[a,i,o],u=[a,i,o,l];if("perspective"!==e||r)if(e.includes("matrix")){const t=s.map(m=>Math.abs(m)<1e-6?0:m);[6,16].includes(t.length)&&(n=n.multiply(m(t)))}else if(["translate","translate3d"].some(m=>e===m)&&a)n=n.translate(a,i||0,o||0);else if("rotate3d"===e&&u.every(m=>!Number.isNaN(+m))&&l)n=n.rotateAxisAngle(a,i,o,l);else if("scale3d"===e&&c.every(m=>!Number.isNaN(+m))&&c.some(m=>1!==m))n=n.scale(a,i,o);else if("rotate"===e&&a)n=n.rotate(0,0,a);else if("scale"!==e||Number.isNaN(a)||1===a){if("skew"===e&&(a||i))n=a?n.skewX(a):n,n=i?n.skewY(i):n;else if(/[XYZ]/.test(e)&&a)if(e.includes("skew"))n=n[e](a);else{const m=e.replace(/[XYZ]/,""),t=e.replace(m,""),r=["X","Y","Z"].indexOf(t),s=[0===r?a:0,1===r?a:0,2===r?a:0];n=n[m](...s)}}else{const m=Number.isNaN(+i)?a:i;n=n.scale(a,m,1)}else n.m34=-1/a}),n}function n(m,t,e){const n=new c;return n.m41=m,n.e=m,n.m42=t,n.f=t,n.m43=e,n}function r(m,t,e){const n=new c,r=Math.PI/180,s=m*r,a=t*r,i=e*r,o=Math.cos(s),l=-Math.sin(s),u=Math.cos(a),h=-Math.sin(a),f=Math.cos(i),y=-Math.sin(i),p=u*f,M=-u*y;n.m11=p,n.a=p,n.m12=M,n.b=M,n.m13=h;const d=l*h*f+o*y;n.m21=d,n.c=d;const w=o*f-l*h*y;return n.m22=w,n.d=w,n.m23=-l*u,n.m31=l*y-o*h*f,n.m32=l*f+o*h*y,n.m33=o*u,n}function s(m,t,e,n){const r=new c,s=n*(Math.PI/360),a=Math.sin(s),i=Math.cos(s),o=a*a,l=Math.sqrt(m*m+t*t+e*e);let u=m,h=t,f=e;0===l?(u=0,h=0,f=1):(u/=l,h/=l,f/=l);const y=u*u,p=h*h,M=f*f,d=1-2*(p+M)*o;r.m11=d,r.a=d;const w=2*(u*h*o+f*a*i);r.m12=w,r.b=w,r.m13=2*(u*f*o-h*a*i);const x=2*(h*u*o-f*a*i);r.m21=x,r.c=x;const N=1-2*(M+y)*o;return r.m22=N,r.d=N,r.m23=2*(h*f*o+u*a*i),r.m31=2*(f*u*o+h*a*i),r.m32=2*(f*h*o-u*a*i),r.m33=1-2*(y+p)*o,r}function a(m,t,e){const n=new c;return n.m11=m,n.a=m,n.m22=t,n.d=t,n.m33=e,n}function i(m){const t=new c,e=m*Math.PI/180,n=Math.tan(e);return t.m21=n,t.c=n,t}function o(m){const t=new c,e=m*Math.PI/180,n=Math.tan(e);return t.m12=n,t.b=n,t}function l(t,e){return m([e.m11*t.m11+e.m12*t.m21+e.m13*t.m31+e.m14*t.m41,e.m11*t.m12+e.m12*t.m22+e.m13*t.m32+e.m14*t.m42,e.m11*t.m13+e.m12*t.m23+e.m13*t.m33+e.m14*t.m43,e.m11*t.m14+e.m12*t.m24+e.m13*t.m34+e.m14*t.m44,e.m21*t.m11+e.m22*t.m21+e.m23*t.m31+e.m24*t.m41,e.m21*t.m12+e.m22*t.m22+e.m23*t.m32+e.m24*t.m42,e.m21*t.m13+e.m22*t.m23+e.m23*t.m33+e.m24*t.m43,e.m21*t.m14+e.m22*t.m24+e.m23*t.m34+e.m24*t.m44,e.m31*t.m11+e.m32*t.m21+e.m33*t.m31+e.m34*t.m41,e.m31*t.m12+e.m32*t.m22+e.m33*t.m32+e.m34*t.m42,e.m31*t.m13+e.m32*t.m23+e.m33*t.m33+e.m34*t.m43,e.m31*t.m14+e.m32*t.m24+e.m33*t.m34+e.m34*t.m44,e.m41*t.m11+e.m42*t.m21+e.m43*t.m31+e.m44*t.m41,e.m41*t.m12+e.m42*t.m22+e.m43*t.m32+e.m44*t.m42,e.m41*t.m13+e.m42*t.m23+e.m43*t.m33+e.m44*t.m43,e.m41*t.m14+e.m42*t.m24+e.m43*t.m34+e.m44*t.m44])}class c{constructor(...m){const t=this;if(t.a=1,t.b=0,t.c=0,t.d=1,t.e=0,t.f=0,t.m11=1,t.m12=0,t.m13=0,t.m14=0,t.m21=0,t.m22=1,t.m23=0,t.m24=0,t.m31=0,t.m32=0,t.m33=1,t.m34=0,t.m41=0,t.m42=0,t.m43=0,t.m44=1,m&&m.length){let e=m;return m instanceof Array&&(m[0]instanceof Array&&[16,6].includes(m[0].length)||"string"==typeof m[0]||[c,DOMMatrix].some(t=>m[0]instanceof t))&&([e]=m),t.setMatrixValue(e)}return t}set isIdentity(m){this.isIdentity=m}get isIdentity(){const m=this;return 1===m.m11&&0===m.m12&&0===m.m13&&0===m.m14&&0===m.m21&&1===m.m22&&0===m.m23&&0===m.m24&&0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m41&&0===m.m42&&0===m.m43&&1===m.m44}get is2D(){const m=this;return 0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m43&&1===m.m44}set is2D(m){this.is2D=m}setMatrixValue(n){return[DOMMatrix,c].some(m=>n instanceof m)?t(n):"string"==typeof n&&n.length&&"none"!==n?e(n):Array.isArray(n)?m(n):this}toString(){const m=this.toArray().join(",");return`${this.is2D?"matrix":"matrix3d"}(${m})`}toArray(){const m=this;let t;return t=m.is2D?[m.a,m.b,m.c,m.d,m.e,m.f]:[m.m11,m.m12,m.m13,m.m14,m.m21,m.m22,m.m23,m.m24,m.m31,m.m32,m.m33,m.m34,m.m41,m.m42,m.m43,m.m44],t.map(m=>Math.abs(m)<1e-6?0:(m*10**6>>0)/10**6)}toJSON(){return JSON.parse(JSON.stringify(this))}multiply(m){return l(this,m)}translate(m,t,e){let r=t,s=e;return null==s&&(s=0),null==r&&(r=0),l(this,n(m,r,s))}scale(m,t,e){let n=t,r=e;return null==n&&(n=m),null==r&&(r=m),l(this,a(m,n,r))}rotate(m,t,e){let n=m,s=t,a=e;return null==s&&(s=0),null==a&&(a=n,n=0),l(this,r(n,s,a))}rotateAxisAngle(m,t,e,n){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return l(this,s(m,t,e,n))}skewX(m){return l(this,i(m))}skewY(m){return l(this,o(m))}transformPoint(m){let t=n(m.x,m.y,m.z);return t.m44=m.w||1,t=this.multiply(t),{x:t.m41,y:t.m42,z:t.m43,w:t.m44}}transform(m){const t=this,e=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,n=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,r=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,s=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:e/s,y:n/s,z:r/s,w:s}}}c.Translate=n,c.Rotate=r,c.RotateAxisAngle=s,c.Scale=a,c.SkewX=i,c.SkewY=o,c.Multiply=l,c.fromArray=m,c.fromMatrix=t,c.fromString=e;export{c as default};

dist/dommatrix.js

 /*!
-* DOMMatrix v0.0.9 (https://thednp.github.io/dommatrix)
+* DOMMatrix v0.0.10 (https://thednp.github.io/DOMMatrix/)
 * Copyright 2021 © thednp
@@ -13,6 +13,6 @@ * Licensed under MIT (https://github.com/thednp/DOMMatrix/blob/master/LICENSE)
   // DOMMatrix Static methods
-  // * `fromFloat64Array` and `fromFloat32Array` methods are not supported
-  // * `fromArray` a much more friendly implementation, should also accept float32Array/ float64Array
-  // * `fromMatrix` is also implemented to facilitate easy instance cloning capability
-  // * `fromString` is a very helpful utility
+  // * `fromFloat64Array` and `fromFloat32Array` methods are not supported;
+  // * `fromArray` a more simple implementation, should also accept float[32/64]Array;
+  // * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance;
+  // * `fromString` parses and loads values from any valid CSS transform string.
 
@@ -25,7 +25,7 @@ /**
    *
-   * @param {CSSMatrix} m identity matrix.
    * @param {Number[]} array an `Array` to feed values from.
    * @return {CSSMatrix} the resulted matrix.
    */
-  function fromArray(m, array) {
+  function fromArray(array) {
+    var m = new CSSMatrix();
     var a = Array.from(array);
@@ -86,4 +86,4 @@
       var m22$1 = a[3];
-      var m14$1 = a[4];
-      var m24$1 = a[5];
+      var m41$1 = a[4];
+      var m42$1 = a[5];
 
@@ -102,7 +102,7 @@ m.m11 = m11$1;
 
-      m.m14 = m14$1;
-      m.e = m14$1;
+      m.m41 = m41$1;
+      m.e = m41$1;
 
-      m.m24 = m24$1;
-      m.f = m24$1;
+      m.m42 = m42$1;
+      m.f = m42$1;
     } else {
@@ -118,12 +118,12 @@ throw new TypeError('CSSMatrix: expecting a 6/16 values Array');
    *
-   * @param {CSSMatrix} target the identity matrix.
-   * @param {CSSMatrix} m the source `CSSMatrix` initialization to feed values from.
+   * @param {CSSMatrix | DOMMatrix} m the source matrix to feed values from.
    * @return {CSSMatrix} the resulted matrix.
    */
-  function fromMatrix(target, m) {
-    return fromArray(target,
+  function fromMatrix(m) {
+    return fromArray(
       [m.m11, m.m12, m.m13, m.m14,
         m.m21, m.m22, m.m23, m.m24,
         m.m31, m.m32, m.m33, m.m34,
-        m.m41, m.m42, m.m43, m.m44]);
+        m.m41, m.m42, m.m43, m.m44]
+    );
   }
@@ -137,53 +137,61 @@
    *
-   * @param {CSSMatrix} target identity matrix.
    * @param {string} source valid CSS transform string syntax.
    * @return {CSSMatrix} the resulted matrix.
    */
-  function fromString(target, source) {
-    var str = String(source).trim();
-    var deg = 180 / Math.PI;
-    var identity = Object.assign(Object.create(target), target);
-    var m = Object.assign(Object.create(target), target);
-    var tramsformObject = str.replace(/\s/g, '').split(')').filter(function (f) { return f; });
+  function fromString(source) {
+    var str = String(source).replace(/\s/g, '');
+    var m = new CSSMatrix();
+    var is2D = true;
+    var tramsformObject = str.split(')').filter(function (f) { return f; }).map(function (fn) {
+      var ref = fn.split('(');
+      var prop = ref[0];
+      var value = ref[1];
+      var components = value.split(',')
+        .map(function (n) { return (n.includes('rad') ? parseFloat(n) * (180 / Math.PI) : parseFloat(n)); });
+      var x = components[0];
+      var y = components[1];
+      var z = components[2];
+      var a = components[3];
 
+      // don't add perspective if is2D
+      if (prop === 'matrix3d'
+          || (prop === 'rotate3d' && [x, y].every(function (n) { return !Number.isNaN(+n) && n !== 0; }) && a)
+          || (['rotateX', 'rotateY'].includes(prop) && x)
+          || (prop === 'translate3d' && [x, y, z].every(function (n) { return !Number.isNaN(+n); }) && z)
+          || (prop === 'scale3d' && [x, y, z].every(function (n) { return !Number.isNaN(+n) && n !== x; }))
+      ) {
+        is2D = false;
+      }
+      return { prop: prop, components: components };
+    });
+
     tramsformObject.forEach(function (tf) {
-      var ref = tf.split('(');
-      var prop = ref[0];
-      var value = ref[1];
-      var ref$1 = value.split(',')
-        .map(function (n) { return (n.includes('rad') ? parseFloat(n) * deg : parseFloat(n)); });
-      var x = ref$1[0];
-      var y = ref$1[1];
-      var z = ref$1[2];
-      var a = ref$1[3];
+      var prop = tf.prop;
+      var components = tf.components;
+      var x = components[0];
+      var y = components[1];
+      var z = components[2];
+      var a = components[3];
       var xyz = [x, y, z];
       var xyza = [x, y, z, a];
 
-      if (prop === 'perspective') {
+      if (prop === 'perspective' && !is2D) {
         m.m34 = -1 / x;
       } else if (prop.includes('matrix')) {
-        var values = value.split(',').map(parseFloat)
-          .map(function (n) { return (Math.abs(n) < 1e-6 ? 0 : n); });
-
-        if ([6, 16].indexOf(values.length) > -1) {
-          m = m.multiply(fromArray(identity, values));
+        var values = components.map(function (n) { return (Math.abs(n) < 1e-6 ? 0 : n); });
+        if ([6, 16].includes(values.length)) {
+          m = m.multiply(fromArray(values));
         }
       } else if (['translate', 'translate3d'].some(function (p) { return prop === p; }) && x) {
         m = m.translate(x, y || 0, z || 0);
-      } else if (prop === 'rotate3d' && xyza.every(function (n) { return typeof n === 'number'; }) && a) {
+      } else if (prop === 'rotate3d' && xyza.every(function (n) { return !Number.isNaN(+n); }) && a) {
         m = m.rotateAxisAngle(x, y, z, a);
-      } else if (prop === 'scale3d' && xyz.every(function (n) { return typeof n === 'number'; }) && xyz.some(function (n) { return n !== 1; })) {
-        var s3x = x !== 1 ? x : 1;
-        var s3y = y !== 1 ? y : 1;
-        var s3z = z !== 1 ? z : 1;
-        m = m.scale(s3x, s3y, s3z);
+      } else if (prop === 'scale3d' && xyz.every(function (n) { return !Number.isNaN(+n); }) && xyz.some(function (n) { return n !== 1; })) {
+        m = m.scale(x, y, z);
       } else if (prop === 'rotate' && x) {
         m = m.rotate(0, 0, x);
-      } else if (prop === 'scale' && typeof x === 'number' && x !== 1) {
-        var nosy = typeof y === 'undefined';
-        var sx = x === 1 ? 1 : x;
-        var sy = nosy ? sx : y;
-        sy = sy === 1 ? 1 : sy;
-        var sz = nosy ? sx : 1;
-        m = m.scale(sx, sy, sz);
+      } else if (prop === 'scale' && !Number.isNaN(x) && x !== 1) {
+        var nosy = Number.isNaN(+y);
+        var sy = nosy ? x : y;
+        m = m.scale(x, sy, 1);
       } else if (prop === 'skew' && (x || y)) {
@@ -194,13 +202,14 @@ m = x ? m.skewX(x) : m;
         if (prop.includes('skew')) {
+          // @ts-ignore unfortunately
           m = m[prop](x);
         } else {
           var fn = prop.replace(/[XYZ]/, '');
-          var axes3d = ['X', 'Y', 'Z'];
           var axis = prop.replace(fn, '');
-          var idx = axes3d.indexOf(axis);
-          var components = [
+          var idx = ['X', 'Y', 'Z'].indexOf(axis);
+          var axeValues = [
             idx === 0 ? x : 0,
             idx === 1 ? x : 0,
             idx === 2 ? x : 0];
-          m = m[fn].apply(m, components);
+          // @ts-ignore unfortunately
+          m = m[fn].apply(m, axeValues);
         }
@@ -210,3 +219,3 @@ }
 
-    return fromMatrix(target, m);
+    return m;
   }
@@ -223,3 +232,2 @@
    *
-   * @param {CSSMatrix} m the identity matrix.
    * @param {Number} x the `x-axis` position.
@@ -230,3 +238,4 @@ * @param {Number} y the `y-axis` position.
    */
-  function Translate(m, x, y, z) {
+  function Translate(x, y, z) {
+    var m = new CSSMatrix();
     m.m41 = x;
@@ -245,3 +254,2 @@ m.e = x;
    *
-   * @param {CSSMatrix} m the identity matrix.
    * @param {Number} rx the `x-axis` rotation.
@@ -252,3 +260,4 @@ * @param {Number} ry the `y-axis` rotation.
    */
-  function Rotate(m, rx, ry, rz) {
+  function Rotate(rx, ry, rz) {
+    var m = new CSSMatrix();
     var degToRad = Math.PI / 180;
@@ -301,3 +310,2 @@ var radX = rx * degToRad;
    *
-   * @param {CSSMatrix} m the identity matrix.
    * @param {Number} x the `x-axis` vector length.
@@ -309,3 +317,4 @@ * @param {Number} y the `y-axis` vector length.
    */
-  function RotateAxisAngle(m, x, y, z, alpha) {
+  function RotateAxisAngle(x, y, z, alpha) {
+    var m = new CSSMatrix();
     var angle = alpha * (Math.PI / 360);
@@ -367,3 +376,2 @@ var sinA = Math.sin(angle);
    *
-   * @param {CSSMatrix} m the identity matrix.
    * @param {Number} x the `x-axis` scale.
@@ -374,3 +382,4 @@ * @param {Number} y the `y-axis` scale.
    */
-  function Scale(m, x, y, z) {
+  function Scale(x, y, z) {
+    var m = new CSSMatrix();
     m.m11 = x;
@@ -392,7 +401,7 @@ m.a = x;
    *
-   * @param {CSSMatrix} m the identity matrix.
    * @param {Number} angle the angle in degrees.
    * @return {CSSMatrix} the resulted matrix.
    */
-  function SkewX(m, angle) {
+  function SkewX(angle) {
+    var m = new CSSMatrix();
     var radA = (angle * Math.PI) / 180;
@@ -411,7 +420,7 @@ var t = Math.tan(radA);
    *
-   * @param {CSSMatrix} m the identity matrix.
    * @param {Number} angle the angle in degrees.
    * @return {CSSMatrix} the resulted matrix.
    */
-  function SkewY(m, angle) {
+  function SkewY(angle) {
+    var m = new CSSMatrix();
     var radA = (angle * Math.PI) / 180;
@@ -428,3 +437,2 @@ var t = Math.tan(radA);
    *
-   * @param {CSSMatrix} m the identity matrix.
    * @param {CSSMatrix} m1 the first matrix.
@@ -434,3 +442,3 @@ * @param {CSSMatrix} m2 the second matrix.
    */
-  function Multiply(m, m1, m2) {
+  function Multiply(m1, m2) {
     var m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41;
@@ -456,7 +464,8 @@ var m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42;
 
-    return fromArray(m,
+    return fromArray(
       [m11, m12, m13, m14,
         m21, m22, m23, m24,
         m31, m32, m33, m34,
-        m41, m42, m43, m44]);
+        m41, m42, m43, m44]
+    );
   }
@@ -498,3 +507,3 @@
       }
-      m.setMatrixValue(ARGS);
+      return m.setMatrixValue(ARGS);
     }
@@ -562,2 +571,3 @@ return m;
    * @param {String[] | Number[] | String | CSSMatrix | DOMMatrix} source
+   * @return {CSSMatrix} a new matrix
    * can be one of the following
@@ -574,10 +584,10 @@ * * valid CSS matrix string,
       // @ts-ignore
-      fromMatrix(m, source);
+      return fromMatrix(source);
     // CSS transform string source
     } if (typeof source === 'string' && source.length && source !== 'none') {
-      fromString(m, source);
+      return fromString(source);
     // [Arguments list | Array] come here
     } if (Array.isArray(source)) {
       // @ts-ignore
-      fromArray(m, source);
+      return fromArray(source);
     }
@@ -632,2 +642,16 @@ return m;
   /**
+   * Returns a JSON representation of the `CSSMatrix` object, a standard *Object*
+   * that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and
+   * excludes `is2D` & `isIdentity` properties.
+   *
+   * The result can also be used as a second parameter for the `fromMatrix` static method
+   * to load values into a matrix instance.
+   *
+   * @return {Object} an *Object* with all matrix values.
+   */
+  CSSMatrix.prototype.toJSON = function toJSON () {
+    return JSON.parse(JSON.stringify(this));
+  };
+
+  /**
    * The Multiply method returns a new CSSMatrix which is the result of this
@@ -641,4 +665,3 @@ * matrix multiplied by the passed matrix, with the passed matrix to the right.
   CSSMatrix.prototype.multiply = function multiply (m2) {
-    var identity = new CSSMatrix();
-    return Multiply(identity, this, m2);
+    return Multiply(this, m2);
   };
@@ -658,4 +681,2 @@
   CSSMatrix.prototype.translate = function translate (x, y, z) {
-    var identity = new CSSMatrix();
-    var translate = new CSSMatrix();
     var X = x;
@@ -666,3 +687,3 @@ var Y = y;
     if (Y == null) { Y = 0; }
-    return Multiply(identity, this, Translate(translate, X, Y, Z));
+    return Multiply(this, Translate(X, Y, Z));
   };
@@ -682,4 +703,2 @@
   CSSMatrix.prototype.scale = function scale (x, y, z) {
-    var identity = new CSSMatrix();
-    var scale = new CSSMatrix();
     var X = x;
@@ -691,3 +710,3 @@ var Y = y;
 
-    return Multiply(identity, this, Scale(scale, X, Y, Z));
+    return Multiply(this, Scale(X, Y, Z));
   };
@@ -708,4 +727,2 @@
   CSSMatrix.prototype.rotate = function rotate (rx, ry, rz) {
-    var identity = new CSSMatrix();
-    var rotation = new CSSMatrix();
     var RX = rx;
@@ -716,3 +733,3 @@ var RY = ry;
     if (RZ == null) { RZ = RX; RX = 0; }
-    return Multiply(identity, this, Rotate(rotation, RX, RY, RZ));
+    return Multiply(this, Rotate(RX, RY, RZ));
   };
@@ -736,5 +753,3 @@
     }
-    var identity = new CSSMatrix();
-    var arx = new CSSMatrix();
-    return Multiply(identity, this, RotateAxisAngle(arx, x, y, z, angle));
+    return Multiply(this, RotateAxisAngle(x, y, z, angle));
   };
@@ -750,5 +765,3 @@
   CSSMatrix.prototype.skewX = function skewX (angle) {
-    var identity = new CSSMatrix();
-    var skx = new CSSMatrix();
-    return Multiply(identity, this, SkewX(skx, angle));
+    return Multiply(this, SkewX(angle));
   };
@@ -764,5 +777,3 @@
   CSSMatrix.prototype.skewY = function skewY (angle) {
-    var identity = new CSSMatrix();
-    var sky = new CSSMatrix();
-    return Multiply(identity, this, SkewY(sky, angle));
+    return Multiply(this, SkewY(angle));
   };
@@ -784,5 +795,4 @@
   CSSMatrix.prototype.transformPoint = function transformPoint (v) {
-    var identity = new CSSMatrix();
     var M = this;
-    var m = Translate(identity, v.x, v.y, v.z);
+    var m = Translate(v.x, v.y, v.z);
 
@@ -789,0 +799,0 @@ m.m44 = v.w || 1;

dist/dommatrix.min.js

@@ -1,2 +0,2 @@
-// DOMMatrix v0.0.9 | thednp © 2021 | MIT-License
-!function(m,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(m="undefined"!=typeof globalThis?globalThis:m||self).CSSMatrix=t()}(this,(function(){"use strict";function m(m,t){var e=Array.from(t);if(16===e.length){var n=e[0],r=e[1],i=e[2],a=e[3],o=e[4],s=e[5],u=e[6],f=e[7],c=e[8],l=e[9],p=e[10],h=e[11],y=e[12],v=e[13],d=e[14],w=e[15];m.m11=n,m.a=n,m.m21=o,m.c=o,m.m31=c,m.m41=y,m.e=y,m.m12=r,m.b=r,m.m22=s,m.d=s,m.m32=l,m.m42=v,m.f=v,m.m13=i,m.m23=u,m.m33=p,m.m43=d,m.m14=a,m.m24=f,m.m34=h,m.m44=w}else{if(6!==e.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");var M=e[0],g=e[1],x=e[2],b=e[3],A=e[4],S=e[5];m.m11=M,m.a=M,m.m12=g,m.b=g,m.m21=x,m.c=x,m.m22=b,m.d=b,m.m14=A,m.e=A,m.m24=S,m.f=S}return m}function t(t,e){return m(t,[e.m11,e.m12,e.m13,e.m14,e.m21,e.m22,e.m23,e.m24,e.m31,e.m32,e.m33,e.m34,e.m41,e.m42,e.m43,e.m44])}function e(e,n){var r=String(n).trim(),i=180/Math.PI,a=Object.assign(Object.create(e),e),o=Object.assign(Object.create(e),e);return r.replace(/\s/g,"").split(")").filter((function(m){return m})).forEach((function(t){var e=t.split("("),n=e[0],r=e[1],s=r.split(",").map((function(m){return m.includes("rad")?parseFloat(m)*i:parseFloat(m)})),u=s[0],f=s[1],c=s[2],l=s[3],p=[u,f,c],h=[u,f,c,l];if("perspective"===n)o.m34=-1/u;else if(n.includes("matrix")){var y=r.split(",").map(parseFloat).map((function(m){return Math.abs(m)<1e-6?0:m}));[6,16].indexOf(y.length)>-1&&(o=o.multiply(m(a,y)))}else if(["translate","translate3d"].some((function(m){return n===m}))&&u)o=o.translate(u,f||0,c||0);else if("rotate3d"===n&&h.every((function(m){return"number"==typeof m}))&&l)o=o.rotateAxisAngle(u,f,c,l);else if("scale3d"===n&&p.every((function(m){return"number"==typeof m}))&&p.some((function(m){return 1!==m}))){var v=1!==u?u:1,d=1!==f?f:1,w=1!==c?c:1;o=o.scale(v,d,w)}else if("rotate"===n&&u)o=o.rotate(0,0,u);else if("scale"===n&&"number"==typeof u&&1!==u){var M=void 0===f,g=1===u?1:u,x=M?g:f;x=1===x?1:x;var b=M?g:1;o=o.scale(g,x,b)}else if("skew"===n&&(u||f))o=u?o.skewX(u):o,o=f?o.skewY(f):o;else if(/[XYZ]/.test(n)&&u)if(n.includes("skew"))o=o[n](u);else{var A=n.replace(/[XYZ]/,""),S=n.replace(A,""),I=["X","Y","Z"].indexOf(S),O=[0===I?u:0,1===I?u:0,2===I?u:0];o=o[A].apply(o,O)}})),t(e,o)}function n(m,t,e,n){return m.m41=t,m.e=t,m.m42=e,m.f=e,m.m43=n,m}function r(m,t,e,n){var r=Math.PI/180,i=t*r,a=e*r,o=n*r,s=Math.cos(i),u=-Math.sin(i),f=Math.cos(a),c=-Math.sin(a),l=Math.cos(o),p=-Math.sin(o),h=f*l,y=-f*p;m.m11=h,m.a=h,m.m12=y,m.b=y,m.m13=c;var v=u*c*l+s*p;m.m21=v,m.c=v;var d=s*l-u*c*p;return m.m22=d,m.d=d,m.m23=-u*f,m.m31=u*p-s*c*l,m.m32=u*l+s*c*p,m.m33=s*f,m}function i(m,t,e,n,r){var i=r*(Math.PI/360),a=Math.sin(i),o=Math.cos(i),s=a*a,u=Math.sqrt(t*t+e*e+n*n),f=t,c=e,l=n;0===u?(f=0,c=0,l=1):(f/=u,c/=u,l/=u);var p=f*f,h=c*c,y=l*l,v=1-2*(h+y)*s;m.m11=v,m.a=v;var d=2*(f*c*s+l*a*o);m.m12=d,m.b=d,m.m13=2*(f*l*s-c*a*o);var w=2*(c*f*s-l*a*o);m.m21=w,m.c=w;var M=1-2*(y+p)*s;return m.m22=M,m.d=M,m.m23=2*(c*l*s+f*a*o),m.m31=2*(l*f*s+c*a*o),m.m32=2*(l*c*s-f*a*o),m.m33=1-2*(p+h)*s,m}function a(m,t,e,n){return m.m11=t,m.a=t,m.m22=e,m.d=e,m.m33=n,m}function o(m,t){var e=t*Math.PI/180,n=Math.tan(e);return m.m21=n,m.c=n,m}function s(m,t){var e=t*Math.PI/180,n=Math.tan(e);return m.m12=n,m.b=n,m}function u(t,e,n){return m(t,[n.m11*e.m11+n.m12*e.m21+n.m13*e.m31+n.m14*e.m41,n.m11*e.m12+n.m12*e.m22+n.m13*e.m32+n.m14*e.m42,n.m11*e.m13+n.m12*e.m23+n.m13*e.m33+n.m14*e.m43,n.m11*e.m14+n.m12*e.m24+n.m13*e.m34+n.m14*e.m44,n.m21*e.m11+n.m22*e.m21+n.m23*e.m31+n.m24*e.m41,n.m21*e.m12+n.m22*e.m22+n.m23*e.m32+n.m24*e.m42,n.m21*e.m13+n.m22*e.m23+n.m23*e.m33+n.m24*e.m43,n.m21*e.m14+n.m22*e.m24+n.m23*e.m34+n.m24*e.m44,n.m31*e.m11+n.m32*e.m21+n.m33*e.m31+n.m34*e.m41,n.m31*e.m12+n.m32*e.m22+n.m33*e.m32+n.m34*e.m42,n.m31*e.m13+n.m32*e.m23+n.m33*e.m33+n.m34*e.m43,n.m31*e.m14+n.m32*e.m24+n.m33*e.m34+n.m34*e.m44,n.m41*e.m11+n.m42*e.m21+n.m43*e.m31+n.m44*e.m41,n.m41*e.m12+n.m42*e.m22+n.m43*e.m32+n.m44*e.m42,n.m41*e.m13+n.m42*e.m23+n.m43*e.m33+n.m44*e.m43,n.m41*e.m14+n.m42*e.m24+n.m43*e.m34+n.m44*e.m44])}var f=function m(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];var n=this;if(n.a=1,n.b=0,n.c=0,n.d=1,n.e=0,n.f=0,n.m11=1,n.m12=0,n.m13=0,n.m14=0,n.m21=0,n.m22=1,n.m23=0,n.m24=0,n.m31=0,n.m32=0,n.m33=1,n.m34=0,n.m41=0,n.m42=0,n.m43=0,n.m44=1,t&&t.length){var r=t;t instanceof Array&&(t[0]instanceof Array&&[16,6].includes(t[0].length)||"string"==typeof t[0]||[m,DOMMatrix].some((function(m){return t[0]instanceof m})))&&(r=t[0]),n.setMatrixValue(r)}return n},c={isIdentity:{configurable:!0},is2D:{configurable:!0}};return c.isIdentity.set=function(m){this.isIdentity=m},c.isIdentity.get=function(){var m=this;return 1===m.m11&&0===m.m12&&0===m.m13&&0===m.m14&&0===m.m21&&1===m.m22&&0===m.m23&&0===m.m24&&0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m41&&0===m.m42&&0===m.m43&&1===m.m44},c.is2D.get=function(){var m=this;return 0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m43&&1===m.m44},c.is2D.set=function(m){this.is2D=m},f.prototype.setMatrixValue=function(n){var r=this;return[DOMMatrix,f].some((function(m){return n instanceof m}))&&t(r,n),"string"==typeof n&&n.length&&"none"!==n&&e(r,n),Array.isArray(n)&&m(r,n),r},f.prototype.toString=function(){var m=this.toArray().join(",");return(this.is2D?"matrix":"matrix3d")+"("+m+")"},f.prototype.toArray=function(){var m=this,t=Math.pow(10,6);return(m.is2D?[m.a,m.b,m.c,m.d,m.e,m.f]:[m.m11,m.m12,m.m13,m.m14,m.m21,m.m22,m.m23,m.m24,m.m31,m.m32,m.m33,m.m34,m.m41,m.m42,m.m43,m.m44]).map((function(m){return Math.abs(m)<1e-6?0:(m*t>>0)/t}))},f.prototype.multiply=function(m){return u(new f,this,m)},f.prototype.translate=function(m,t,e){var r=new f,i=new f,a=t,o=e;return null==o&&(o=0),null==a&&(a=0),u(r,this,n(i,m,a,o))},f.prototype.scale=function(m,t,e){var n=new f,r=new f,i=t,o=e;return null==i&&(i=m),null==o&&(o=m),u(n,this,a(r,m,i,o))},f.prototype.rotate=function(m,t,e){var n=m,i=t,a=e;return null==i&&(i=0),null==a&&(a=n,n=0),u(new f,this,r(new f,n,i,a))},f.prototype.rotateAxisAngle=function(m,t,e,n){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");var r=new f,a=new f;return u(r,this,i(a,m,t,e,n))},f.prototype.skewX=function(m){return u(new f,this,o(new f,m))},f.prototype.skewY=function(m){return u(new f,this,s(new f,m))},f.prototype.transformPoint=function(m){var t=n(new f,m.x,m.y,m.z);return t.m44=m.w||1,{x:(t=this.multiply(t)).m41,y:t.m42,z:t.m43,w:t.m44}},f.prototype.transform=function(m){var t=this,e=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,n=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,r=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:e/i,y:n/i,z:r/i,w:i}},Object.defineProperties(f.prototype,c),f.Translate=n,f.Rotate=r,f.RotateAxisAngle=i,f.Scale=a,f.SkewX=o,f.SkewY=s,f.Multiply=u,f.fromArray=m,f.fromMatrix=t,f.fromString=e,f}));
+// DOMMatrix v0.0.10 | thednp © 2021 | MIT-License
+!function(m,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(m="undefined"!=typeof globalThis?globalThis:m||self).CSSMatrix=t()}(this,(function(){"use strict";function m(m){var t=new f,e=Array.from(m);if(16===e.length){var r=e[0],n=e[1],i=e[2],a=e[3],o=e[4],s=e[5],u=e[6],c=e[7],l=e[8],p=e[9],y=e[10],h=e[11],v=e[12],d=e[13],M=e[14],w=e[15];t.m11=r,t.a=r,t.m21=o,t.c=o,t.m31=l,t.m41=v,t.e=v,t.m12=n,t.b=n,t.m22=s,t.d=s,t.m32=p,t.m42=d,t.f=d,t.m13=i,t.m23=u,t.m33=y,t.m43=M,t.m14=a,t.m24=c,t.m34=h,t.m44=w}else{if(6!==e.length)throw new TypeError("CSSMatrix: expecting a 6/16 values Array");var x=e[0],g=e[1],N=e[2],b=e[3],A=e[4],S=e[5];t.m11=x,t.a=x,t.m12=g,t.b=g,t.m21=N,t.c=N,t.m22=b,t.d=b,t.m41=A,t.e=A,t.m42=S,t.f=S}return t}function t(t){return m([t.m11,t.m12,t.m13,t.m14,t.m21,t.m22,t.m23,t.m24,t.m31,t.m32,t.m33,t.m34,t.m41,t.m42,t.m43,t.m44])}function e(t){var e=String(t).replace(/\s/g,""),r=new f,n=!0;return e.split(")").filter((function(m){return m})).map((function(m){var t=m.split("("),e=t[0],r=t[1].split(",").map((function(m){return m.includes("rad")?parseFloat(m)*(180/Math.PI):parseFloat(m)})),i=r[0],a=r[1],o=r[2],s=r[3];return("matrix3d"===e||"rotate3d"===e&&[i,a].every((function(m){return!Number.isNaN(+m)&&0!==m}))&&s||["rotateX","rotateY"].includes(e)&&i||"translate3d"===e&&[i,a,o].every((function(m){return!Number.isNaN(+m)}))&&o||"scale3d"===e&&[i,a,o].every((function(m){return!Number.isNaN(+m)&&m!==i})))&&(n=!1),{prop:e,components:r}})).forEach((function(t){var e=t.prop,i=t.components,a=i[0],o=i[1],s=i[2],u=i[3],f=[a,o,s],c=[a,o,s,u];if("perspective"!==e||n)if(e.includes("matrix")){var l=i.map((function(m){return Math.abs(m)<1e-6?0:m}));[6,16].includes(l.length)&&(r=r.multiply(m(l)))}else if(["translate","translate3d"].some((function(m){return e===m}))&&a)r=r.translate(a,o||0,s||0);else if("rotate3d"===e&&c.every((function(m){return!Number.isNaN(+m)}))&&u)r=r.rotateAxisAngle(a,o,s,u);else if("scale3d"===e&&f.every((function(m){return!Number.isNaN(+m)}))&&f.some((function(m){return 1!==m})))r=r.scale(a,o,s);else if("rotate"===e&&a)r=r.rotate(0,0,a);else if("scale"!==e||Number.isNaN(a)||1===a){if("skew"===e&&(a||o))r=a?r.skewX(a):r,r=o?r.skewY(o):r;else if(/[XYZ]/.test(e)&&a)if(e.includes("skew"))r=r[e](a);else{var p=e.replace(/[XYZ]/,""),y=e.replace(p,""),h=["X","Y","Z"].indexOf(y),v=[0===h?a:0,1===h?a:0,2===h?a:0];r=r[p].apply(r,v)}}else{var d=Number.isNaN(+o)?a:o;r=r.scale(a,d,1)}else r.m34=-1/a})),r}function r(m,t,e){var r=new f;return r.m41=m,r.e=m,r.m42=t,r.f=t,r.m43=e,r}function n(m,t,e){var r=new f,n=Math.PI/180,i=m*n,a=t*n,o=e*n,s=Math.cos(i),u=-Math.sin(i),c=Math.cos(a),l=-Math.sin(a),p=Math.cos(o),y=-Math.sin(o),h=c*p,v=-c*y;r.m11=h,r.a=h,r.m12=v,r.b=v,r.m13=l;var d=u*l*p+s*y;r.m21=d,r.c=d;var M=s*p-u*l*y;return r.m22=M,r.d=M,r.m23=-u*c,r.m31=u*y-s*l*p,r.m32=u*p+s*l*y,r.m33=s*c,r}function i(m,t,e,r){var n=new f,i=r*(Math.PI/360),a=Math.sin(i),o=Math.cos(i),s=a*a,u=Math.sqrt(m*m+t*t+e*e),c=m,l=t,p=e;0===u?(c=0,l=0,p=1):(c/=u,l/=u,p/=u);var y=c*c,h=l*l,v=p*p,d=1-2*(h+v)*s;n.m11=d,n.a=d;var M=2*(c*l*s+p*a*o);n.m12=M,n.b=M,n.m13=2*(c*p*s-l*a*o);var w=2*(l*c*s-p*a*o);n.m21=w,n.c=w;var x=1-2*(v+y)*s;return n.m22=x,n.d=x,n.m23=2*(l*p*s+c*a*o),n.m31=2*(p*c*s+l*a*o),n.m32=2*(p*l*s-c*a*o),n.m33=1-2*(y+h)*s,n}function a(m,t,e){var r=new f;return r.m11=m,r.a=m,r.m22=t,r.d=t,r.m33=e,r}function o(m){var t=new f,e=m*Math.PI/180,r=Math.tan(e);return t.m21=r,t.c=r,t}function s(m){var t=new f,e=m*Math.PI/180,r=Math.tan(e);return t.m12=r,t.b=r,t}function u(t,e){return m([e.m11*t.m11+e.m12*t.m21+e.m13*t.m31+e.m14*t.m41,e.m11*t.m12+e.m12*t.m22+e.m13*t.m32+e.m14*t.m42,e.m11*t.m13+e.m12*t.m23+e.m13*t.m33+e.m14*t.m43,e.m11*t.m14+e.m12*t.m24+e.m13*t.m34+e.m14*t.m44,e.m21*t.m11+e.m22*t.m21+e.m23*t.m31+e.m24*t.m41,e.m21*t.m12+e.m22*t.m22+e.m23*t.m32+e.m24*t.m42,e.m21*t.m13+e.m22*t.m23+e.m23*t.m33+e.m24*t.m43,e.m21*t.m14+e.m22*t.m24+e.m23*t.m34+e.m24*t.m44,e.m31*t.m11+e.m32*t.m21+e.m33*t.m31+e.m34*t.m41,e.m31*t.m12+e.m32*t.m22+e.m33*t.m32+e.m34*t.m42,e.m31*t.m13+e.m32*t.m23+e.m33*t.m33+e.m34*t.m43,e.m31*t.m14+e.m32*t.m24+e.m33*t.m34+e.m34*t.m44,e.m41*t.m11+e.m42*t.m21+e.m43*t.m31+e.m44*t.m41,e.m41*t.m12+e.m42*t.m22+e.m43*t.m32+e.m44*t.m42,e.m41*t.m13+e.m42*t.m23+e.m43*t.m33+e.m44*t.m43,e.m41*t.m14+e.m42*t.m24+e.m43*t.m34+e.m44*t.m44])}var f=function m(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];var r=this;if(r.a=1,r.b=0,r.c=0,r.d=1,r.e=0,r.f=0,r.m11=1,r.m12=0,r.m13=0,r.m14=0,r.m21=0,r.m22=1,r.m23=0,r.m24=0,r.m31=0,r.m32=0,r.m33=1,r.m34=0,r.m41=0,r.m42=0,r.m43=0,r.m44=1,t&&t.length){var n=t;return t instanceof Array&&(t[0]instanceof Array&&[16,6].includes(t[0].length)||"string"==typeof t[0]||[m,DOMMatrix].some((function(m){return t[0]instanceof m})))&&(n=t[0]),r.setMatrixValue(n)}return r},c={isIdentity:{configurable:!0},is2D:{configurable:!0}};return c.isIdentity.set=function(m){this.isIdentity=m},c.isIdentity.get=function(){var m=this;return 1===m.m11&&0===m.m12&&0===m.m13&&0===m.m14&&0===m.m21&&1===m.m22&&0===m.m23&&0===m.m24&&0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m41&&0===m.m42&&0===m.m43&&1===m.m44},c.is2D.get=function(){var m=this;return 0===m.m31&&0===m.m32&&1===m.m33&&0===m.m34&&0===m.m43&&1===m.m44},c.is2D.set=function(m){this.is2D=m},f.prototype.setMatrixValue=function(r){return[DOMMatrix,f].some((function(m){return r instanceof m}))?t(r):"string"==typeof r&&r.length&&"none"!==r?e(r):Array.isArray(r)?m(r):this},f.prototype.toString=function(){var m=this.toArray().join(",");return(this.is2D?"matrix":"matrix3d")+"("+m+")"},f.prototype.toArray=function(){var m=this,t=Math.pow(10,6);return(m.is2D?[m.a,m.b,m.c,m.d,m.e,m.f]:[m.m11,m.m12,m.m13,m.m14,m.m21,m.m22,m.m23,m.m24,m.m31,m.m32,m.m33,m.m34,m.m41,m.m42,m.m43,m.m44]).map((function(m){return Math.abs(m)<1e-6?0:(m*t>>0)/t}))},f.prototype.toJSON=function(){return JSON.parse(JSON.stringify(this))},f.prototype.multiply=function(m){return u(this,m)},f.prototype.translate=function(m,t,e){var n=t,i=e;return null==i&&(i=0),null==n&&(n=0),u(this,r(m,n,i))},f.prototype.scale=function(m,t,e){var r=t,n=e;return null==r&&(r=m),null==n&&(n=m),u(this,a(m,r,n))},f.prototype.rotate=function(m,t,e){var r=m,i=t,a=e;return null==i&&(i=0),null==a&&(a=r,r=0),u(this,n(r,i,a))},f.prototype.rotateAxisAngle=function(m,t,e,r){if(4!==arguments.length)throw new TypeError("CSSMatrix: expecting 4 values");return u(this,i(m,t,e,r))},f.prototype.skewX=function(m){return u(this,o(m))},f.prototype.skewY=function(m){return u(this,s(m))},f.prototype.transformPoint=function(m){var t=r(m.x,m.y,m.z);return t.m44=m.w||1,{x:(t=this.multiply(t)).m41,y:t.m42,z:t.m43,w:t.m44}},f.prototype.transform=function(m){var t=this,e=t.m11*m.x+t.m12*m.y+t.m13*m.z+t.m14*m.w,r=t.m21*m.x+t.m22*m.y+t.m23*m.z+t.m24*m.w,n=t.m31*m.x+t.m32*m.y+t.m33*m.z+t.m34*m.w,i=t.m41*m.x+t.m42*m.y+t.m43*m.z+t.m44*m.w;return{x:e/i,y:r/i,z:n/i,w:i}},Object.defineProperties(f.prototype,c),f.Translate=r,f.Rotate=n,f.RotateAxisAngle=i,f.Scale=a,f.SkewX=o,f.SkewY=s,f.Multiply=u,f.fromArray=m,f.fromMatrix=t,f.fromString=e,f}));

package.json

 {
   "name": "dommatrix",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "ES6+ shim for DOMMatrix",
@@ -22,3 +22,3 @@ "main": "dist/dommatrix.min.js",
     "build-js": "rollup --environment FORMAT:umd,MIN:false -c",
-    "build-test": "rollup --environment FORMAT:iife,MIN:false,OUTPUTFILE:test/dommatrix.min.js -c",
+    "build-test": "rollup --environment FORMAT:iife,MIN:true,OUTPUTFILE:test/dommatrix.min.js -c",
     "build-js-min": "rollup --environment FORMAT:umd,MIN:true -c",
@@ -43,3 +43,3 @@ "build-esm": "rollup --environment FORMAT:esm,MIN:false -c",
   },
-  "homepage": "https://thednp.github.io/dommatrix",
+  "homepage": "https://thednp.github.io/DOMMatrix/",
   "dependencies": {
@@ -46,0 +46,0 @@ "@rollup/plugin-buble": "^0.21.3",

README.md

@@ -12,3 +12,3 @@ # DOMMatrix shim
 # Demo
-[Click me](https://thednp.github.io/DOMMatrix) to be happy.
+See DOMMatrix shim in action, [click me](https://thednp.github.io/DOMMatrix) and start transforming.
 
@@ -62,3 +62,4 @@
 * **added** `fromArray()` static method, not present in the constructor prototype, should also process *Float32Array* / *Float64Array* via `Array.from()`;
-* **added** `toArray()` instance method, a very convenient way to export your matrix;
+* **added** `toArray()` instance method, normalizes values and is used by the `toString()` instance method;
+* **added** `toJSON()` instance method will generate a standard *Object* which includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and excludes `is2D` & `isIdentity` properties;
 * **added** `transformPoint()` instance method which works like the original.
@@ -71,3 +72,5 @@ * *removed* `afine` property, it's a very old *WebKitCSSMatrix* defined property;
 * *not supported* `toFloat64Array()` and `toFloat32Array()` instance methods are not supported, a quick `FromFloat32Array(myMatrix.toArray())` should achieve just that;
-* *not supported* `fromFloat64Array()` and `fromFloat32Array()` static methods are not supported since `fromArray()` should handle them just as well,
+* *not supported* `fromFloat64Array()` and `fromFloat32Array()` static methods are not supported since `fromArray()` should handle them just as well;
+* *not supported* `flipX()` or `flipY()` instance methods of the *DOMMatrixReadOnly* prototype are not supported,
+* *not supported* `translateSelf()` or `rotateSelf()` instance methods of the *DOMMatrix* prototype are not supported, instead we only implemented the most used *DOMMatrixReadOnly* instance methods.
 
@@ -74,0 +77,0 @@

src/DOMMatrix.js

 // DOMMatrix Static methods
-// * `fromFloat64Array` and `fromFloat32Array` methods are not supported
-// * `fromArray` a much more friendly implementation, should also accept float32Array/ float64Array
-// * `fromMatrix` is also implemented to facilitate easy instance cloning capability
-// * `fromString` is a very helpful utility
+// * `fromFloat64Array` and `fromFloat32Array` methods are not supported;
+// * `fromArray` a more simple implementation, should also accept float[32/64]Array;
+// * `fromMatrix` load values from another CSSMatrix/DOMMatrix instance;
+// * `fromString` parses and loads values from any valid CSS transform string.
 
@@ -13,7 +13,7 @@ /**
  *
- * @param {CSSMatrix} m identity matrix.
  * @param {Number[]} array an `Array` to feed values from.
  * @return {CSSMatrix} the resulted matrix.
  */
-function fromArray(m, array) {
+function fromArray(array) {
+  const m = new CSSMatrix();
   const a = Array.from(array);
@@ -58,3 +58,3 @@
   } else if (a.length === 6) {
-    const [m11, m12, m21, m22, m14, m24] = a;
+    const [m11, m12, m21, m22, m41, m42] = a;
 
@@ -73,7 +73,7 @@ m.m11 = m11;
 
-    m.m14 = m14;
-    m.e = m14;
+    m.m41 = m41;
+    m.e = m41;
 
-    m.m24 = m24;
-    m.f = m24;
+    m.m42 = m42;
+    m.f = m42;
   } else {
@@ -89,12 +89,12 @@ throw new TypeError('CSSMatrix: expecting a 6/16 values Array');
  *
- * @param {CSSMatrix} target the identity matrix.
- * @param {CSSMatrix} m the source `CSSMatrix` initialization to feed values from.
+ * @param {CSSMatrix | DOMMatrix} m the source matrix to feed values from.
  * @return {CSSMatrix} the resulted matrix.
  */
-function fromMatrix(target, m) {
-  return fromArray(target,
+function fromMatrix(m) {
+  return fromArray(
     [m.m11, m.m12, m.m13, m.m14,
       m.m21, m.m22, m.m23, m.m24,
       m.m31, m.m32, m.m33, m.m34,
-      m.m41, m.m42, m.m43, m.m44]);
+      m.m41, m.m42, m.m43, m.m44],
+  );
 }
@@ -108,47 +108,52 @@
  *
- * @param {CSSMatrix} target identity matrix.
  * @param {string} source valid CSS transform string syntax.
  * @return {CSSMatrix} the resulted matrix.
  */
-function fromString(target, source) {
-  const str = String(source).trim();
-  const deg = 180 / Math.PI;
-  const identity = Object.assign(Object.create(target), target);
-  let m = Object.assign(Object.create(target), target);
-  const tramsformObject = str.replace(/\s/g, '').split(')').filter((f) => f);
+function fromString(source) {
+  const str = String(source).replace(/\s/g, '');
+  let m = new CSSMatrix();
+  let is2D = true;
+  const tramsformObject = str.split(')').filter((f) => f).map((fn) => {
+    const [prop, value] = fn.split('(');
+    const components = value.split(',')
+      .map((n) => (n.includes('rad') ? parseFloat(n) * (180 / Math.PI) : parseFloat(n)));
+    const [x, y, z, a] = components;
 
+    // don't add perspective if is2D
+    if (prop === 'matrix3d'
+        || (prop === 'rotate3d' && [x, y].every((n) => !Number.isNaN(+n) && n !== 0) && a)
+        || (['rotateX', 'rotateY'].includes(prop) && x)
+        || (prop === 'translate3d' && [x, y, z].every((n) => !Number.isNaN(+n)) && z)
+        || (prop === 'scale3d' && [x, y, z].every((n) => !Number.isNaN(+n) && n !== x))
+    ) {
+      is2D = false;
+    }
+    return { prop, components };
+  });
+
   tramsformObject.forEach((tf) => {
-    const [prop, value] = tf.split('(');
-    const [x, y, z, a] = value.split(',')
-      .map((n) => (n.includes('rad') ? parseFloat(n) * deg : parseFloat(n)));
+    const { prop, components } = tf;
+    const [x, y, z, a] = components;
     const xyz = [x, y, z];
     const xyza = [x, y, z, a];
 
-    if (prop === 'perspective') {
+    if (prop === 'perspective' && !is2D) {
       m.m34 = -1 / x;
     } else if (prop.includes('matrix')) {
-      const values = value.split(',').map(parseFloat)
-        .map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
-
-      if ([6, 16].indexOf(values.length) > -1) {
-        m = m.multiply(fromArray(identity, values));
+      const values = components.map((n) => (Math.abs(n) < 1e-6 ? 0 : n));
+      if ([6, 16].includes(values.length)) {
+        m = m.multiply(fromArray(values));
       }
     } else if (['translate', 'translate3d'].some((p) => prop === p) && x) {
       m = m.translate(x, y || 0, z || 0);
-    } else if (prop === 'rotate3d' && xyza.every((n) => typeof n === 'number') && a) {
+    } else if (prop === 'rotate3d' && xyza.every((n) => !Number.isNaN(+n)) && a) {
       m = m.rotateAxisAngle(x, y, z, a);
-    } else if (prop === 'scale3d' && xyz.every((n) => typeof n === 'number') && xyz.some((n) => n !== 1)) {
-      const s3x = x !== 1 ? x : 1;
-      const s3y = y !== 1 ? y : 1;
-      const s3z = z !== 1 ? z : 1;
-      m = m.scale(s3x, s3y, s3z);
+    } else if (prop === 'scale3d' && xyz.every((n) => !Number.isNaN(+n)) && xyz.some((n) => n !== 1)) {
+      m = m.scale(x, y, z);
     } else if (prop === 'rotate' && x) {
       m = m.rotate(0, 0, x);
-    } else if (prop === 'scale' && typeof x === 'number' && x !== 1) {
-      const nosy = typeof y === 'undefined';
-      const sx = x === 1 ? 1 : x;
-      let sy = nosy ? sx : y;
-      sy = sy === 1 ? 1 : sy;
-      const sz = nosy ? sx : 1;
-      m = m.scale(sx, sy, sz);
+    } else if (prop === 'scale' && !Number.isNaN(x) && x !== 1) {
+      const nosy = Number.isNaN(+y);
+      const sy = nosy ? x : y;
+      m = m.scale(x, sy, 1);
     } else if (prop === 'skew' && (x || y)) {
@@ -159,13 +164,14 @@ m = x ? m.skewX(x) : m;
       if (prop.includes('skew')) {
+        // @ts-ignore unfortunately
         m = m[prop](x);
       } else {
         const fn = prop.replace(/[XYZ]/, '');
-        const axes3d = ['X', 'Y', 'Z'];
         const axis = prop.replace(fn, '');
-        const idx = axes3d.indexOf(axis);
-        const components = [
+        const idx = ['X', 'Y', 'Z'].indexOf(axis);
+        const axeValues = [
           idx === 0 ? x : 0,
           idx === 1 ? x : 0,
           idx === 2 ? x : 0];
-        m = m[fn](...components);
+        // @ts-ignore unfortunately
+        m = m[fn](...axeValues);
       }
@@ -175,3 +181,3 @@ }
 
-  return fromMatrix(target, m);
+  return m;
 }
@@ -188,3 +194,2 @@
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` position.
@@ -195,3 +200,4 @@ * @param {Number} y the `y-axis` position.
  */
-function Translate(m, x, y, z) {
+function Translate(x, y, z) {
+  const m = new CSSMatrix();
   m.m41 = x;
@@ -210,3 +216,2 @@ m.e = x;
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} rx the `x-axis` rotation.
@@ -217,3 +222,4 @@ * @param {Number} ry the `y-axis` rotation.
  */
-function Rotate(m, rx, ry, rz) {
+function Rotate(rx, ry, rz) {
+  const m = new CSSMatrix();
   const degToRad = Math.PI / 180;
@@ -266,3 +272,2 @@ const radX = rx * degToRad;
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` vector length.
@@ -274,3 +279,4 @@ * @param {Number} y the `y-axis` vector length.
  */
-function RotateAxisAngle(m, x, y, z, alpha) {
+function RotateAxisAngle(x, y, z, alpha) {
+  const m = new CSSMatrix();
   const angle = alpha * (Math.PI / 360);
@@ -332,3 +338,2 @@ const sinA = Math.sin(angle);
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` scale.
@@ -339,3 +344,4 @@ * @param {Number} y the `y-axis` scale.
  */
-function Scale(m, x, y, z) {
+function Scale(x, y, z) {
+  const m = new CSSMatrix();
   m.m11 = x;
@@ -357,7 +363,7 @@ m.a = x;
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} angle the angle in degrees.
  * @return {CSSMatrix} the resulted matrix.
  */
-function SkewX(m, angle) {
+function SkewX(angle) {
+  const m = new CSSMatrix();
   const radA = (angle * Math.PI) / 180;
@@ -376,7 +382,7 @@ const t = Math.tan(radA);
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} angle the angle in degrees.
  * @return {CSSMatrix} the resulted matrix.
  */
-function SkewY(m, angle) {
+function SkewY(angle) {
+  const m = new CSSMatrix();
   const radA = (angle * Math.PI) / 180;
@@ -393,3 +399,2 @@ const t = Math.tan(radA);
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {CSSMatrix} m1 the first matrix.
@@ -399,3 +404,3 @@ * @param {CSSMatrix} m2 the second matrix.
  */
-function Multiply(m, m1, m2) {
+function Multiply(m1, m2) {
   const m11 = m2.m11 * m1.m11 + m2.m12 * m1.m21 + m2.m13 * m1.m31 + m2.m14 * m1.m41;
@@ -421,7 +426,8 @@ const m12 = m2.m11 * m1.m12 + m2.m12 * m1.m22 + m2.m13 * m1.m32 + m2.m14 * m1.m42;
 
-  return fromArray(m,
+  return fromArray(
     [m11, m12, m13, m14,
       m21, m22, m23, m24,
       m31, m32, m33, m34,
-      m41, m42, m43, m44]);
+      m41, m42, m43, m44],
+  );
 }
@@ -440,5 +446,7 @@
    * @constructor
-   * @param {any} args
-   * accepts valid CSS transform string, CSSMatrix/DOMMatrix instance or an *Array*
-   * number[] | string | CSSMatrix | DOMMatrix | undefined
+   * @param {any} args accepts all possible parameter configuration:
+   * * Types: number[] | string | CSSMatrix | DOMMatrix | undefined
+   * * valid CSS transform string,
+   * * CSSMatrix/DOMMatrix instance
+   * * a 6/16 elements *Array*
    */
@@ -467,3 +475,3 @@ constructor(...args) {
       }
-      m.setMatrixValue(ARGS);
+      return m.setMatrixValue(ARGS);
     }
@@ -529,2 +537,3 @@ return m;
    * @param {String[] | Number[] | String | CSSMatrix | DOMMatrix} source
+   * @return {CSSMatrix} a new matrix
    * can be one of the following
@@ -541,10 +550,10 @@ * * valid CSS matrix string,
       // @ts-ignore
-      fromMatrix(m, source);
+      return fromMatrix(source);
     // CSS transform string source
     } if (typeof source === 'string' && source.length && source !== 'none') {
-      fromString(m, source);
+      return fromString(source);
     // [Arguments list | Array] come here
     } if (Array.isArray(source)) {
       // @ts-ignore
-      fromArray(m, source);
+      return fromArray(source);
     }
@@ -599,2 +608,16 @@ return m;
   /**
+   * Returns a JSON representation of the `CSSMatrix` object, a standard *Object*
+   * that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and
+   * excludes `is2D` & `isIdentity` properties.
+   *
+   * The result can also be used as a second parameter for the `fromMatrix` static method
+   * to load values into a matrix instance.
+   *
+   * @return {Object} an *Object* with all matrix values.
+   */
+  toJSON() {
+    return JSON.parse(JSON.stringify(this));
+  }
+
+  /**
    * The Multiply method returns a new CSSMatrix which is the result of this
@@ -608,4 +631,3 @@ * matrix multiplied by the passed matrix, with the passed matrix to the right.
   multiply(m2) {
-    const identity = new CSSMatrix();
-    return Multiply(identity, this, m2);
+    return Multiply(this, m2);
   }
@@ -625,4 +647,2 @@
   translate(x, y, z) {
-    const identity = new CSSMatrix();
-    const translate = new CSSMatrix();
     const X = x;
@@ -633,3 +653,3 @@ let Y = y;
     if (Y == null) Y = 0;
-    return Multiply(identity, this, Translate(translate, X, Y, Z));
+    return Multiply(this, Translate(X, Y, Z));
   }
@@ -649,4 +669,2 @@
   scale(x, y, z) {
-    const identity = new CSSMatrix();
-    const scale = new CSSMatrix();
     const X = x;
@@ -658,3 +676,3 @@ let Y = y;
 
-    return Multiply(identity, this, Scale(scale, X, Y, Z));
+    return Multiply(this, Scale(X, Y, Z));
   }
@@ -675,4 +693,2 @@
   rotate(rx, ry, rz) {
-    const identity = new CSSMatrix();
-    const rotation = new CSSMatrix();
     let RX = rx;
@@ -683,3 +699,3 @@ let RY = ry;
     if (RZ == null) { RZ = RX; RX = 0; }
-    return Multiply(identity, this, Rotate(rotation, RX, RY, RZ));
+    return Multiply(this, Rotate(RX, RY, RZ));
   }
@@ -703,5 +719,3 @@
     }
-    const identity = new CSSMatrix();
-    const arx = new CSSMatrix();
-    return Multiply(identity, this, RotateAxisAngle(arx, x, y, z, angle));
+    return Multiply(this, RotateAxisAngle(x, y, z, angle));
   }
@@ -717,5 +731,3 @@
   skewX(angle) {
-    const identity = new CSSMatrix();
-    const skx = new CSSMatrix();
-    return Multiply(identity, this, SkewX(skx, angle));
+    return Multiply(this, SkewX(angle));
   }
@@ -731,5 +743,3 @@
   skewY(angle) {
-    const identity = new CSSMatrix();
-    const sky = new CSSMatrix();
-    return Multiply(identity, this, SkewY(sky, angle));
+    return Multiply(this, SkewY(angle));
   }
@@ -751,5 +761,4 @@
   transformPoint(v) {
-    const identity = new CSSMatrix();
     const M = this;
-    let m = Translate(identity, v.x, v.y, v.z);
+    let m = Translate(v.x, v.y, v.z);
 
@@ -756,0 +765,0 @@ m.m44 = v.w || 1;

types/DOMMatrix.d.ts

@@ -12,5 +12,7 @@ export default CSSMatrix;
      * @constructor
-     * @param {any} args
-     * accepts valid CSS transform string, CSSMatrix/DOMMatrix instance or an *Array*
-     * number[] | string | CSSMatrix | DOMMatrix | undefined
+     * @param {any} args accepts all possible parameter configuration:
+     * * Types: number[] | string | CSSMatrix | DOMMatrix | undefined
+     * * valid CSS transform string,
+     * * CSSMatrix/DOMMatrix instance
+     * * a 6/16 elements *Array*
      */
@@ -79,2 +81,3 @@ constructor(...args: any);
      * @param {String[] | Number[] | String | CSSMatrix | DOMMatrix} source
+     * @return {CSSMatrix} a new matrix
      * can be one of the following
@@ -108,2 +111,13 @@ * * valid CSS matrix string,
     /**
+     * Returns a JSON representation of the `CSSMatrix` object, a standard *Object*
+     * that includes `{a,b,c,d,e,f}` and `{m11,m12,m13,..m44}` properties and
+     * excludes `is2D` & `isIdentity` properties.
+     *
+     * The result can also be used as a second parameter for the `fromMatrix` static method
+     * to load values into a matrix instance.
+     *
+     * @return {Object} an *Object* with all matrix values.
+     */
+    toJSON(): Object;
+    /**
      * The Multiply method returns a new CSSMatrix which is the result of this
@@ -245,3 +259,2 @@ * matrix multiplied by the passed matrix, with the passed matrix to the right.
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` position.
@@ -252,3 +265,3 @@ * @param {Number} y the `y-axis` position.
  */
-declare function Translate(m: CSSMatrix, x: number, y: number, z: number): CSSMatrix;
+declare function Translate(x: number, y: number, z: number): CSSMatrix;
 /**
@@ -259,3 +272,2 @@ * Creates a new `CSSMatrix` for the rotation matrix and returns it.
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} rx the `x-axis` rotation.
@@ -266,3 +278,3 @@ * @param {Number} ry the `y-axis` rotation.
  */
-declare function Rotate(m: CSSMatrix, rx: number, ry: number, rz: number): CSSMatrix;
+declare function Rotate(rx: number, ry: number, rz: number): CSSMatrix;
 /**
@@ -274,3 +286,2 @@ * Creates a new `CSSMatrix` for the rotation matrix and returns it.
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` vector length.
@@ -282,3 +293,3 @@ * @param {Number} y the `y-axis` vector length.
  */
-declare function RotateAxisAngle(m: CSSMatrix, x: number, y: number, z: number, alpha: number): CSSMatrix;
+declare function RotateAxisAngle(x: number, y: number, z: number, alpha: number): CSSMatrix;
 /**
@@ -290,3 +301,2 @@ * Creates a new `CSSMatrix` for the scale matrix and returns it.
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} x the `x-axis` scale.
@@ -297,3 +307,3 @@ * @param {Number} y the `y-axis` scale.
  */
-declare function Scale(m: CSSMatrix, x: number, y: number, z: number): CSSMatrix;
+declare function Scale(x: number, y: number, z: number): CSSMatrix;
 /**
@@ -305,7 +315,6 @@ * Creates a new `CSSMatrix` for the shear of the `x-axis` rotation matrix and
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} angle the angle in degrees.
  * @return {CSSMatrix} the resulted matrix.
  */
-declare function SkewX(m: CSSMatrix, angle: number): CSSMatrix;
+declare function SkewX(angle: number): CSSMatrix;
 /**
@@ -317,7 +326,6 @@ * Creates a new `CSSMatrix` for the shear of the `y-axis` rotation matrix and
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {Number} angle the angle in degrees.
  * @return {CSSMatrix} the resulted matrix.
  */
-declare function SkewY(m: CSSMatrix, angle: number): CSSMatrix;
+declare function SkewY(angle: number): CSSMatrix;
 /**
@@ -327,3 +335,2 @@ * Creates a new `CSSMatrix` resulted from the multiplication of two matrixes
  *
- * @param {CSSMatrix} m the identity matrix.
  * @param {CSSMatrix} m1 the first matrix.
@@ -333,3 +340,3 @@ * @param {CSSMatrix} m2 the second matrix.
  */
-declare function Multiply(m: CSSMatrix, m1: CSSMatrix, m2: CSSMatrix): CSSMatrix;
+declare function Multiply(m1: CSSMatrix, m2: CSSMatrix): CSSMatrix;
 /**
@@ -341,7 +348,6 @@ * Creates a new mutable `CSSMatrix` object given an array float values.
  *
- * @param {CSSMatrix} m identity matrix.
  * @param {Number[]} array an `Array` to feed values from.
  * @return {CSSMatrix} the resulted matrix.
  */
-declare function fromArray(m: CSSMatrix, array: number[]): CSSMatrix;
+declare function fromArray(array: number[]): CSSMatrix;
 /**
@@ -351,7 +357,6 @@ * Creates a new mutable `CSSMatrix` object given an existing matrix or a
  *
- * @param {CSSMatrix} target the identity matrix.
- * @param {CSSMatrix} m the source `CSSMatrix` initialization to feed values from.
+ * @param {CSSMatrix | DOMMatrix} m the source matrix to feed values from.
  * @return {CSSMatrix} the resulted matrix.
  */
-declare function fromMatrix(target: CSSMatrix, m: CSSMatrix): CSSMatrix;
+declare function fromMatrix(m: CSSMatrix | DOMMatrix): CSSMatrix;
 /**
@@ -363,6 +368,5 @@ * Feed a CSSMatrix object with a valid CSS transform value.
  *
- * @param {CSSMatrix} target identity matrix.
  * @param {string} source valid CSS transform string syntax.
  * @return {CSSMatrix} the resulted matrix.
  */
-declare function fromString(target: CSSMatrix, source: string): CSSMatrix;
+declare function fromString(source: string): CSSMatrix;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

108539

increased by0.77%

Lines of code

2522

increased by1.24%

Number of lines in readme file

81

increased by3.85%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes