CSS3 2D transforms allow you to manipulate boxes for effects like rotating, scaling, and skewing, without using images, Flash, or JavaScript. Sadly, IE 8 and earlier don't support CSS3 transforms—but you can get the same results using its mysterious Matrix filter in your CSS. IE's proprietary filter property is not valid CSS, but it's ignored by other browsers and doesn't require the use of JavaScript. The Matrix filter allows you to put in four numbers to produce transformation effects. Without the Transforms Translator, you'd need to know matrix mathematics to come up with the four values. This tool does the math for you to translate your simple CSS3 transforms syntax into a Matrix filter value for IE 6 through 8. Learn more about filters and the Transforms Translator.

Questions or comments? Please feel free to do so on my blog article on the Translator.

Supported Transform Functions



This tool written by Zoltan Hawryluk and Zoe Mickley Gillenwater.

Powered by CSS Sandpaper, with the help of code written by Weston Ruter, Dean Edwards and Andrew Johnson.

This is the object before transformation.

This is the object after transformation.

Step 1: Input your CSS3 transform functions

Don't know what to try? Use the default transform provided.

px px

Step 2: Copy and paste the cross-browser CSS!

For CSS3 Savvy Browsers

													
								

For IE


					
								

					

To ensure you're transforms will look optimal in IE, please take a look at our user notes.

Error

rotate( angle)

Rotates HTML elements. The angle can be in degrees (e.g. rotate(30deg)) or radians (e.g. rotate(1.3rad))

rotate(45deg)

This is the object before transformation.

This is the object after transformation.

scale( sx, sy)

Scales HTML elements. The parameters sx and sy are numbers, where 1 represents the original size, 2 represents twice the size, 0.5 represents half the size, etc. Note that if sy isn’t specified, it is assumed to be equal to sx . Related functions are scaleX(sx) (scales horizontally only) and scaleY(sy) (scales vertically only).

Original scaleX(1.3) scaleY(1.3) scale(0.5, 0.5) scale(-1, 1) scale(1, -1)

Image Source: Wikimedia Commons.

skew( x-angle, y-angle)

Skews the object around the x and y axes by the specified angles in degrees or radians. If ay isn’t provided, it is assumed to be 0deg

skewX(25deg) skewY(35deg) skew(25deg, 35deg)

This is the object before transformation.

This is the object after transformation.

This is the object before transformation.

This is the object after transformation.

This is the object before transformation.

This is the object after transformation.

translate( tx, ty)

Moves the object tx horizontally and ty vertically.

translateX(40px) translateY(30px) translate(40px, 30px)

This is the object before transformation.

This is the object after transformation.

This is the object before transformation.

This is the object after transformation.

This is the object before transformation.

This is the object after transformation.

matrix( a, c, b, d, tx, ty)

This is the hardest of all the transform functions to understand unless you are mathematically gifted. However, for those who are stubborn, geeky, or both, a brief explanation follows. If you don't undertand everything below, don't fret — you'll probably never use this function.

This function is almost the direct equivalent to Microsoft's Matrix Filter. These first four values, a , c , b and d , correspond to the first four values of Microsoft Matrix Filter, M11 , M12 , M21 and M22 . In other words, this statement

transform: matrix(1, 2, 3, 4, 0, 0);
is the same as this statement:
filter: progid:DXImageTransform.Microsoft.Matrix(
         M11=1,
         M12=3,
         M21=2,
         M22=4,
         SizingMethod='auto expand');
Note that c and b are out of order. This is due to a difference in Microsoft's convention compared to the W3C's.

The last two numbers, tx and ty , are the translation factors for the object. In other words, this statement:

transform: matrix(1, 0, 0, 1, 22px, 33px);

is the same as this statement

transform: translate(22px, 33px);

and this mathematical notation:

Note: at the time of this writing, Firefox (version 3.6) requires units for tx and ty (such as px or em ) which Safari 4, Opera 10.10 and Chrome 5.0 require units not be supplied. At this time, this tool does not take this into account.

As mentioned earlier, if you aren’t familiar with linear algebra and matrix arithmetic, this function will be hard to understand. That's okay, because most designers will never need this function. For further information, you may want to read Wikipedia’s Transformation Matrix article, although if you are mathematically challenged, you may run away from your computer screaming.

Please Wait.