How to Reverse-Engineer a Webkit Matrix3D Transform

How to reverse-engineer a webkit matrix3d transform

If your object is only being rotated about Y, then yes, the rotation is simple to calculate - it's the arccos of Matrix elements 1,1 or 3,3 or the arsin of -(element 3,1) or arcsin of element 1,3. In your specific example, it's about 180 degrees. If the rotations are about more than just the y axis, then you have to start tracking previous rotations and it can get messier.

Your translation will just be the bottom row of the output matrix, 0,0,0 in this case.

See examples on
http://www.inversereality.org/tutorials/graphics%20programming/3dwmatrices.html

CSS3 animation on transform: rotate. Way to fetch current deg of the rotating element?

I recently had to write a function that does exactly what you want! Feel free to use it:

// Parameter element should be a DOM Element object.
// Returns the rotation of the element in degrees.
function getRotationDegrees(element) {
    // get the computed style object for the element
    var style = window.getComputedStyle(element);
    // this string will be in the form 'matrix(a, b, c, d, tx, ty)'
    var transformString = style['-webkit-transform']
                       || style['-moz-transform']
                       || style['transform'] ;
    if (!transformString || transformString == 'none')
        return 0;
    var splits = transformString.split(',');
    // parse the string to get a and b
    var parenLoc = splits[0].indexOf('(');
    var a = parseFloat(splits[0].substr(parenLoc+1));
    var b = parseFloat(splits[1]);
    // doing atan2 on b, a will give you the angle in radians
    var rad = Math.atan2(b, a);
    var deg = 180 * rad / Math.PI;
    // instead of having values from -180 to 180, get 0 to 360
    if (deg < 0) deg += 360;
    return deg;
}

Hope this helps!

EDIT I updated the code to work with matrix3d strings, but it still only gives the 2d rotation degrees (ie. rotation around the Z axis).

CSS3 scale() causes divs to become pixelated

The solution is to start your center circle as big as it needs to be, then scale it down as the reference starting point.

Then, on the hover event you scale up to 1, which will preserve the unpixelated center circle.

Reference: jsFiddle

Note other settings such as positioning are done due to compensate for these changes.

---

Status Update:

Consider instead of using border-radius to make circle, use ASCII Character of circle or outline
circle:

• ○ ☺ ☻ ☼

Reference: jsFiddle (Note positions are not calibrated.)

The above characters are essentially TEXT, hence use ANY CSS2 or CCS3 text or font property!

As certain characters become really big they do pixelate so use "reverse scale" method for these characters as previously answered but note, at least in Firefox, the transitions become expensive when super large fonts are used. Works best with medium to large fonts.

Tip: This ASCII based method may need the width and height properties for positioning to be realized correctly, so use that if positioning seems broken.

---

Related Topics