Servage Magazine

Transform

Values: transform function(s) | none

Default: none

Applies to: transformable elements (see sidebar)

Inherits: no

This article focuses on the more straightforward 2-D varieties because they have more practical uses. Transforms are supported on all major browser versions with vendor prefixes. They are not supported at all on IE8 and earlier, Firefox 3 and earlier, and Opera 10.1 and earlier.

You can apply a transform to the normal state of an element and it will appear in its transformed state when the page loads. Just be sure that the page is still usable on browsers that don’t support transforms. It is common to pull out the transforms only when users interact with the element via a rollover or JavaScript event. Either way, transforms are a good candidate for progressive enhancement—if an IE8 user sees an element straight instead of on a jaunty angle, it’s probably no biggie.

When an element transforms, its element box keeps its original position and influences the layout around it, in the same way that space is left behind by a relatively positioned element. It is as though the transformation magically picks up the pixels of the rendered element, messes around with them, and lays them back down on top of the page. So if you move an element with transform, you’re only moving a picture of it. That picture has no effect on the surrounding layout.

Let’s go through the transform functions one by one, starting with rotate.

Transforming the angle (rotate)

If you’d like an element to appear on a bit of an angle, use the rotate transform function. The value of the rotate function is an angle specified in positive or negative degrees. The image has been rotated –10 degrees (350 degrees) using the following style rule. The tinted image shows the element’s original position for reference.

img {

width: 300px;

height: 400px;

transform: rotate(-10deg);

}

Notice that the image rotates around its center point, which is the default point around which all transformations happen. But you can change that easily with the transform-origin property.

Transformable Elements

You can apply the transform property to the following element types:

• HTML elements with replaced content, such as img, canvas, form inputs, and embedded media
• Elements with display: block
• Elements with display: inlineblock
• Elements with display: inlinetable

transform-origin

Values: percentage | length | left | center | right | top | bottom

Default: 50% 50%

Applies to: transformable elements

Inherits: no

The value for transform-origin is either two keywords, length measurements, or percentage values. The first value is the horizontal offset, and the second is the vertical offset. If only one value is provided, it will be used for both. If we wanted to rotate the redwood forest image around a point at the center of its top edge, we could write it in any of the following ways:

transform-origin: center top;

transform-origin: 50%, 0%;

transform-origin: 150px, 0;

It is easy to demonstrate the origin point with the rotate function, but keep in mind that you can set an origin point for any of the transform functions.

Sources for further reading

• Smashing Magazine
• W3 Schools