Images rotation and div rotation by CSS Transforms

13 / Aug / 2010 by Umar 2 comments

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##


comments (2)

  1. mijola

    I came to the exact ending as well some time ago. Nice write-up and I shall be sure to look back later for additional updates.

  2. CoursesWeb

    On this page:
    it is a tutorial about how to rotate Div, Images, and other HTML elements with jQuery, by any angle, also with animation.
    Works also in IE 7+.


Leave a Reply

Your email address will not be published. Required fields are marked *