The World Wide Web Consortium's cascading style sheet (CSS) 2D Transforms Working Draft describes new ways for web designers and developers to rotate, skew, scale, and reposition HTML elements.
The CSS 2D Transforms Working Draft allows for two properties, transform and transform-origin.
The transform Property
The transform property describes a two-dimensional function, like rotate or skew, that can be applied to any block-level or inline-level HTML element, including images, text, or even HTML5 video.
In all, the transform property supports several two-dimensional functions that each describe some change to the element.
The transform-origin Property
The transform-origin property describes where a transform function should begin. For example, if I wanted to rotate an image 90 degrees, what point should it rotate from? The top right? The top left? This property would inform the rendering engine.
The transform-origin property will accept percentage or length value for left, center, right and top, center, bottom.
The Rotate Function
The simplest of the transform functions is rotate. The CSS for this function is straightforward and the effect is predictable. Given some basic HTML mark up like this:
<!doctype html> <html lang="en"> <link type="text/css" rel="stylesheet" href="style.css"> <body> <div id="transform" > <img src="image.png"/> </div> </body> </html>
The CSS for rotating the image is:
#transform {transform: rotate(10deg); transform-origin: top left;}
Changing the transform-origin property affects where the rotation begins. Choosing "bottom right," as an example, will actually rotate a portion of the image up and out of view.
#transform {transform: rotate(10deg); transform-origin: bottom right;}
I can, of course, also adjust the angle of the rotation.
#transform {transform: rotate(45deg); transform-origin: top left;}
The effect can be applied on a :hover so that the rotation is the result of a user interacting with the element.
#transform:hover {transform: rotate(15deg); transform-origin: top left;}
The Skew Function
The value for the skew function can be a single angle or an angle for each the x and y axis.
#transform {transform: skew(15deg); transform-origin: top left;}
The values for the x or y axises can also be set individually.
#transform {transform: skewX(15deg) skewY(10deg); transform-origin: top left;}
The Translate Function
In CSS 2D Transforms the translate function won't turn your English into French, rather it repositions the element on the page.
#transform {transform: translate(75px, 45px); transform-origin: top left;}
The Scale Function
The scale function shrinks or enlarges an element. The function accepts either a single numerical value, or numerical values for scaling x and y. Like skew, the values for x and y can be set separately.
#transform {transform: scale(.5); transform-origin: top left;}
Ecommerce Examples
Ok, so CSS 2D Transforms are neat, but what will they do for you, an ecommerce designer or developer?
There are actually several scenarios where the transform property can provide a nice level of interactivity without requiring you to use layered background images, JavaScript, or Adobe Flash. These scenarios are valid for any site design, including online retail sites.
- Skewed text effects in a main navigation
- Creating vertical or angle text effects without using images
- Positioning video into complex site designs
In addition, some new secure shopping cart solutions are shunning JavaScript and ActiveX, so having a purely CSS method for transition can be valuable if you are forced to work with one of these restrictive solutions.
A more specific example might be a product category page that shows a grid of available products. Using the transform property in conjunction with :hover and backgrounds, I can encourage shoppers to click on products by rotating or scaling the element slightly when a potential customer hovers over the product image or containing div.
Browser Support
CSS 2D Transforms are not currently supported in any major web browser. But don't worry, I have not been wasting your time. Several leading browsers support variations of the property.
In Firefox, which is what I used for all of the screen captures on this page, simply add "-moz-."
#transform {-moz-transform: rotate(10deg); -moz-transform-origin: top left;}
Google's Chrome and Apple's Safari support transforms starting with "-webkit-."
#transform {-webkit-transform: rotate(10deg); -webkit-transform-origin: top left;}
Also, given recent work on the CSS 2d Transform working draft, it is likely that Chrome, Firefox, and Safari will continue to improve their support for transformations.
