rotation posts

As mentioned in another post on css rotation, I had some issues with rotating t…

Continuing my adoption of new CSS3 capabilities, I've built my first site using rotation. CSS3 allows rotation of elements with the transform: rotate(); declaration. It is as simple as giving a value between the rotate parenthesis with a number and the unit deg. Positive values go clockwise, negative values counter-clockwise. I don't think any browsers yet support the CSS3 spec transform property, so you must use the vendor-specific hack prefixed properties -moz-transform, -webkit-transform, and -o-transform. There is in fact a CSS3 proposed rotation property, but I believe that has no current support at all.

Then, there is IE. For IE, the matrix filter must be used. It, unfortunately, does not allow for nice degree values to be used and instead uses four numbers derived by some confusing math. I could not get Microsoft's example script working, but I found this matrix rotation calculator to calculate the values and create the declarations. It shows that a similar matrix transformation is available in the transform property, but the value is more confusing, so I just used the rotate transformation for transform capable browsers. So for IE I must go to the calculator for every degree value of rotation I want to have. Somewhat of a pain, but at least it works.

The site I built is for Amy's Shoes. The new version has not yet gone live, but I'll link to it once it has [We no longer run this site]. The design utilized a lot of rotation, with many different elements rotated in different orientations. It also needed to be able to handle some dynamic and AJAXed content. I ran into a number of issues while building the site that are worth mentioning.