Images rotation and div rotation by CSS Transforms

The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. Although you can do the same thing with images in Photoshop or The GIMP, using CSS transforms allows developers to do the same thing with any HTML markup and allows users to select the text within the transformed object.

I saw the design potential of using CSS transforms and was frustrated at Explorer’s lack of support. I originally tried a non-JavaScript solution which involved creating CSS rules that combine transform with an IE technology that does something similar:

the syntax of transform is very obvious:

#myObject {
   transform: rotate(40deg) scale(2.0);
}

but the IE filter code is quite intimidating:

#myObject {
   filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
        M11=1.5320888862379554, M12=-1.2855752193730787,
        M21=1.2855752193730796, M22=1.5320888862379558);
}

The scary numbers that the DXImageTransform.Microsoft.Matrix filter uses requires knowledge of matrix and vector mathematics. Even the mathematically gifted wouldn’t want to do the calculations to do a simple rotate in CSS .

although it is possible to have a list of transformations using transform, the DXImageTransform.Microsoft.Matrix filter only allows one transform matrix. In order to implement multiple transforms using one filter, a designer would have to convert all the transforms into matrices and multiply them together.

when rotating, skewing, or doing any other transformations on objects using the transform property.
##Umar Pahat##
umar@intelligrape.com
www.intelligrape.com