transform3d

3d transform operations and interpolation for matrix3d

Transform3d

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;
transform1.rotate(45).scale(2);
 
// applies Transform3d::toString() 
element1.style.WebkitTransform = transform1;
// applies Matrix3d::toString(), should have the same exact effect 
element1.style.WebkitTransform = transform1.compose();
 
// Second transform 
var transform2 = new Transform3d;
transform2.rotate(480).scale(1);
 
// applies Transform3d::toString() 
element2.style.WebkitTransform = transform2;
// applies Matrix3d::toString(), should have the same exact effect 
element2.style.WebkitTransform = 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 
  element3.style.WebkitTransform = interpolation.step(value).compose();
  if (value === 1) clearInterval(interval);
  else value += 0.01;
}, 16);