node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »



3d transform operations and interpolation.

Some of the code was ported from Chromium.

Supports all of the w3c transform functions.

Implements the Interpolation of Transforms logic from the w3c spec. When the transform operations don't match (different length or different operations) the transform operations are converted to a 3d matrix, and a decomposed matrix interpolation is applied instead, courtesy of the matrix3d package.

For application to dom elements, the transform list can either be composed to a matrix, or stringified to a combined transform list.


var Transform3d = require('transform3d');
// First transform 
var transform1 = new Transform3d;
// applies Transform3d::toString() = transform1;
// applies Matrix3d::toString(), should have the same exact effect = transform1.compose();
// Second transform 
var transform2 = new Transform3d;
// applies Transform3d::toString() = transform2;
// applies Matrix3d::toString(), should have the same exact effect = transform2.compose();
// Interpolation 
var interpolation = new Transform3d.Interpolation(transform1, transform2);
// dead simple animation logic example 
var value = 0;
var interval = setInterval(function() {
  if (value >= 1) value = 1;
  // applying the interpolation as a matrix = interpolation.step(value).compose();
  if (value === 1) clearInterval(interval);
  else value += 0.01;
}, 16);