How to get a CSS Transformation value

Lately I’ve been playing around with CSS Transformations and I was frustrated by the fact that I couldn’t get the transformed value after a transformation has taken place. But if turns out you can, WebKitCSSMatrix has 6 properties for 2D transformations, 16 for 3D transformations. The 6 2D properties are labeled a – f, so here’s how, for example, to get the X transformation:

var elem = document.getElementById('somediv');
var matrix = new WebKitCSSMatrix(window.getComputedStyle(elem).webkitTransform);
var x = matrix.e;

Here’s the documentation, although it doesn’t specify what the properties represent. I know e and f are X and Y, but I haven’t tired the others.

Safari WebKitCSSMatrix Documentation

Leave a Reply