UnifiedTransform.js is a JavaScript library to combine multiple CSS transform commands by multiplying the matrices one after the other. This is especially useful when you want to apply all the transforms to your elements not embedded within the same DOM hierarchy.
import UnifiedTransform from 'unifiedtransform';
const cm = new UnifiedTransform;
cm.transform('translateY(100px)rotate(33deg)');
cm.scale(1.5);
cm.rotate(45);
console.log(cm.toTransformString()) // matrix(0.3118675362266392, 1.4672214011007083, -1.4672214011007083, 0.3118675362266392, 0, 100)
Specifies a 2D translation by the vector (tx, ty)
Specifies a 2D scale operation by the (sx, sy) scaling vector described by the 2 parameters. If the second parameter is omitted, the scaling is applied symmetrically.
Specifies a 2D rotation by the angle specified in the parameter about the origin of the element or optionally the given point (x, y)
Specifies a 2D skew transformation along the X axis by the given angle.
Specifies a 2D skew transformation along the Y axis by the given angle.
Specifies a 2D transformation in the form of a transformation matrix of the six values [a, b, c, d, x, y]
Parses a transform string and applies each transformation one after the other
Evaluates a point using the current transformation matrix and returns the new point
Gets the 3x3 transform matrix of the current homogeneous transformation, optionally as a 2D array.
Gets a CSS transform string to apply the current matrix
Installing UnifiedTransform is as easy as cloning this repo or use the following command:
npm install unifiedtransform
import UnifiedTransform from "unifiedtransform";
const cm = new UnifiedTransform();
...
If you plan to enhance the library, make sure you add test cases and all the previous tests are passing. You can test the library with
npm test
Copyright (c) 2023, Robert Eisele Licensed under the MIT license.