27th November 2010 in CSS

CSS3 transform property – think out of the box

So far we have used box model for layout of webpages. CSS 3 now allows us to think out of the box. Ok, not exactly out of the box, but at least transform the box. CSS 2D transform module provides us some new functions, using these functions elements can be translated, rotated, scaled, and skewed. That means we can manipulate the elements appearance up to some extinct.

Understanding the transform property

A two dimensional transform is applied to an element through the transform property. The property provides several specific methods (called transformation functions) that allow you to apply multiple transformations, described below. This property works with coordinate system of the browser, with help of transformation function it changes the coordinates of the targeted element (i.e. the HTML element on which CSS is applied).

The transformation functions

The value of the transform property is a list of <transform-functions> applied in the order provided. The individual transform functions are separated by whitespace. The set of allowed transform functions is given below. In this list the type <translation-value> is defined as a <length> or <percentage> value, and the <angle> type is defined by CSS Values and Units.

Browser Support

Although currently the CSS3 specification is still in draft status, some of the new properties that it includes are rapidly being adopted by most browser vendors; with the exception of Internet Explorer, which as usual doesn’t stand out from the crowd for its progressive nature. This is exactly the case for the "transform" property. Transform property is now supported in Firefox 3.5+. Opera 10.5 and Webkit since 3.1

Examples with transformation functions in use

Click here for working demo of all examples.


The translate(x, y) function is similar to relative positioning in CSS. It translates (or relocate) an element to the left (x) and top (y), relative from it’s original position.

[code lang=”css”]
-webkit-transform: translate(15px, -15px);
-moz-transform: translate(15px, -15px);
-o-transform: translate(15px, -15px);
transform: translate(15px, -15px);


The translateX(x) function is similar to the translate() function above, but only the left/right value is specified.

[code lang=”css”]
-webkit-transform: translatex(15px);
-moz-transform: translatex(15px);
-o-transform: translatex(15px);
transform: translatex(15px);


The translateY(y) function is similar to the translate() function above, but only the top/bottom value is specified

[code lang=”css”]
-webkit-transform: translatey(-15px);
-moz-transform: translatey(-15px);
-o-transform: translatey(-15px);
transform: translatey(-15px);


The scale(w, h) property scales an element by (w) width and (h) height. If only one value is declared, the scaling will be proportional. Since you likely don’t want to distort an element, you’ll generally see only one parameter in this transform function

[code lang=”css”]
-webkit-transform: scale(1.5, 2);
-moz-transform: scale(1.5, 2);
-o-transform: scale(1.5, 2);
transform: scale(1.5, 2);


The scalex(w) function is similar to the scale() function above, but only the width value is specified. It is the same as declaring scale(w, 1)

[code lang=”css”]
-webkit-transform: scalex(0.5);
-moz-transform: scalex(0.5);
-o-transform: scalex(0.5);
transform: scalex(0.5);


The scaley(y) function is similar to the scale() function above, but only the height value is specified. It is the same as declaring scale(1, h)

[code lang=”css”]
-webkit-transform: scaley(2);
-moz-transform: scaley(2);
-o-transform: scaley(2);
transform: scaley(2);


The rotate(angle) function rotates an element from the point of origin with the angle value specified.

[code lang=”css”]
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg)


The skew(x,y) function specifies a skew along the X and Y axes. The x specifies the skew on the x-axis, the y specifies the skew on the y-axis. If there is only one parameter, then it’s the same as skew(x, 0), or skewX(x) . The possible values are angles: degrees, turns or grads.

[code lang=”css”]
-webkit-transform: skew(15deg, 4deg);
-moz-transform: skew(15deg, 4deg);
-o-transform: skew(15deg, 4deg);
transform: skew(15deg, 4deg);


The skewx(x) function is similar to the skew() value above, but only the x-axis value is specified. It is the same as declaring skew(x,0)

[code lang=”css”]
-webkit-transform: skewx(15deg);
-moz-transform: skewx(15deg);
-o-transform: skewx(15deg);
transform: skewx(15deg);


The skewy(y) function is similar to the skew() value above, but only the y-axis value is specified. It is the same as declaring skew(0,y).

[code lang=”css”]
-webkit-transform: skewy(-6deg);
-moz-transform: skewy(-6deg);
-o-transform: skewy(-6deg);
transform: skewy(-6deg);

Multiple transforms

Above examples demonstrates single transforms, but you can apply more than one transform on an element. To apply more than one transform, simply separate the transform functions with spaces.


[code lang=”css”]
-webkit-transform: translate(-10%, -10%) scale(1.5) rotate(15deg);
-moz-transform: translate(-10%, -10%) scale(1.5) rotate(15deg);
-o-transform: translate(-10%, -10%) scale(1.5) rotate(15deg);
transform: translate(-10%, -10%) scale(1.5) rotate(15deg);

The End

Please share your thoughts and examples for utilizing the transform property in more creative ways. Also don’t forget to share the post on facebook, twitter etc.

About the author

Alok Jain

Alok design digital experiences to help businesses achieve their goals. He is passionate about designing right User Experience for their customers. For over 15 years, he have worked with small startups to mature product teams. Whether it is designing a WordPress product, a frontend experience, WooCommerce, Shopify, he follow the best product development practices for design and code, for desktop or mobile.