UnifiedTransform.js - Combining CSS/SVG Transforms into a single Transform with JavaScript
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.
Example / Motivation
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)
Methods
UnifiedTransform translate(tx, ty)
Specifies a 2D translation by the vector (tx, ty)
UnifiedTransform scale(sx, sy = null)
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.
UnifiedTransform rotate(angle, x, y)
Specifies a 2D rotation by the angle specified in the parameter about the origin of the element or optionally the given point (x, y)
UnifiedTransform skewX(degrees)
Specifies a 2D skew transformation along the X axis by the given angle.
UnifiedTransform skewY(degrees)
Specifies a 2D skew transformation along the Y axis by the given angle.
UnifiedTransform applyMatrix(m)
Specifies a 2D transformation in the form of a transformation matrix of the six values [a, b, c, d, x, y]
UnifiedTransform transform(str)
Parses a transform string and applies each transformation one after the other
Array eval(x, y)
Evaluates a point using the current transformation matrix and returns the new point
Array toMatrix(2D = false)
Gets the 3x3 transform matrix of the current homogeneous transformation, optionally as a 2D array.
String toTransformString()
Gets a CSS transform string to apply the current matrix
Installation
Installing UnifiedTransform is as easy as cloning this repo or use the following command:
npm install unifiedtransform
Using UnifiedTransform.js with TypeScript
import UnifiedTransform from "unifiedtransform";
const cm = new UnifiedTransform();
...
Testing
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 and licensing
Copyright (c) 2023, Robert Eisele Licensed under the MIT license.