Fun With Transform Origins and Matrices

Forcing IE to support a transform origin, transform origin IE. Plus a transform animation class for YUI 2.7.

Implementing Transform Origin In IE

The key to this is IE solution is that as the matrix filter is applied to the element, its offsetWidth and offsetHeight are the dimensions of the transformed element's bounding box if and only if the sizing method parameter is set to 'auto expand'.

.matrix-transform{
filter: progid:DXImageTransform.Microsoft.Matrix(M11='0.7071',M12='-0.2479',M21='0.7071',M22='1.1663', sizingMethod='auto expand');

}

If 'auto expand' is not used, then you will have to write code that finds the dimensions of the bounding box of the transformed element and manually set the width and height yourself. If you use 'auto expand' then IE will resize the element for you free of charge.

Another issue is that in IE the element needs to be positioned absolutely so the element will be removed from the document flow. As a workaround I wrap the element in a relatively positioned element sized to the same dimensions.

So with this in mind to support a transform origin in internet explorer the following steps must be taken: Note: for this example we'll be trying to achieve the following styling on an element:

	div.example {
		transform: rotate(45deg) skewX(33deg);
		transform-origin(150% 33%);
		width:100px;
		height: 100px;
	}

The element's bounding box will be a transparent blue and has the dimensions of width:97px, height:187px

The transformed element will have a containing bounding box's left and top properties set in order to illustrate each step.

A rotation of 45 degrees, and skewing about the x axis 33 degrees will result in the following matrix (I've truncated to 4 decimal places):

Let's proceed with the implementation steps.

1. Always have the original dimensions of the element handy.

   		width:100px;
   		height: 100px;
   

2. Take the original center of the element and translate it by the negated transform origin.

   	center = (50, 50)
   	origin = (100 * 150%, 100 * 33%) = (150, 33)
   	translated center = (50 - 150, 50 - 33) = (-100, 17)
   

3. Apply the matrix transform to the result.

   	[[0.7071, -0.2479],
   	 [0.7071, 1.1663]]
   	 * [-100, 17]
   	 = [0.7071 * -100 + -0.2479 * 17, 0.7071 * -100 + 1.1663 * 17]
   	 = [-74.9242, -50.8834]
   

4. Translate the result by the transform origin.

   	[-74.9242 + 150, -50.8834 + 33]
   	= [75.0758, -17.8834]
   

5. Subtract from the x value of the result half the width of the bounding box, and from the y value of the result half the height of the bounding box.

   	[75.0758 - 97/2, -17.8834 - 187/2] ~= [26.5, -112]
   

6. This is where the top left corner of the bounding box should be

   Actual Code:

   	#true-transform {
   	-moz-transform: rotate(45deg) skewX(33deg);
   	-moz-transform-origin: 150% 33%;
   	-webkit-transform: rotate(45deg) skewX(33deg);
   	-webkit-transform-origin: 150% 33%;
   

   Mathematically, this is nothing new, it's really just the algorithm for transforming a point or set of points (think corners of a polygon) about an origin which is:

   1. Translate by the negated value of the origin.
   2. Apply the transform to the points, i.e the matrix.
   3. Translate by the origin.

The tough part is the origin dimensions, I don't have a viewport change listener or anything going on, so if the screen is resized in anyway then the effects won't be consistent in ie since the code has sized the element but all in all I think it's working pretty well.

Examples

Here are some rudimentary examples:

• Origin Manipulation through Drag 'n Drop
• Tabview POC using matrix animation
• Download the Code

  Just Updated 1/07/2011. Could not transform properly in IE because my code was shortsighted and couldn't parse floating point numbers. Never fear, this POC code works now :)

  Just updated 03/10/2010. Could not rotate by increments of 90 degrees due to css style object's choking on really small numbers in exponential format, i.e 6.2345197345e-17.
  Thanks to Denny Wong for finding the issue.