CSS3 2D Transformation Functions
In my previous article we discovered that transformations are applied using the
transform property (with a -webkit prefix for Chrome, Safari and Opera 15):
-webkit-transform: function(values); transform: function(values);
In this article we’ll discuss all 2D functions.
translate, translateX and translateY
translate function moves an element relative to its current location. It accepts an x and y value which can be any typical CSS length (px, em, %, etc):
transform: translate(-200%, 100px);
In this example, the element is moved 200% to the left and 100px down. The percentage is based on the original size of the box so 200% represents twice its width.
If you only wanted to move in a single direction, you can use
Now you’re probably thinking this property is pointless — after all, we could move elements in CSS2.1 using margins or absolute positioning values. However, it can come in useful. For example, assume you had an element centered using
margin: 0 auto;. Moving that element 20px to the left would be tricky unless you knew the exact dimensions of the container — but
translate makes it easy.
scale, scaleX and scaleY
scale affects the dimensions of the element and all its children. It can be passed a single parameter which represents the scaling in both directions, e.g. make the element twice as large:
Or we can pass two parameters which scale the element horizontally and vertically, e.g. make the element half the width but twice the height:
transform: scale(0.5, 2);
Alternatively, you can use
scaleY to target one dimension.
What’s less well known is that either dimension can accept a negative value which creates a mirror image of the element. For example, a horizontal reflection which is 150% taller:
transform: scale(-1, 1.5);
As you’d expect,
rotate rotates an element using an angle specified in degrees (deg) or radians (rad), e.g.
A positive value rotates clockwise while a negative value rotates counter-clockwise. The item rotates around its center although you can change the behavior using the
transform-origin property (and
-webkit-transform-origin) with keywords (left, right, top, bottom, center), percentages or length units, e.g.
/* rotate around top-left of element */ transform-origin: left top;
skewX and skewY
skewY can be used to skew against the horizontal and vertical axis accordingly by passing an angle in degrees (deg) or radians (rad). (Note the single
skew function which accepted both parameters has been dropped from the specification and shouldn’t be used).
Multiple transformation functions can be passed to the
transform property if they are separated by whitespace characters, e.g.
transform: rotate(-20deg) skewX(-10deg) scale(0.8);
If you’re a hardcore mathematician, you can also apply transformations using the matrix function. This accepts six parameters; four for the transformation matrix followed by two for the dimension scaling, e.g.
Finally, if you want to switch off all the transformations applied to an element, simply use a
none function with no parameters:
Working with transformations in two dimensions is easy. In the next lesson, we’ll move into 3D…