November 27, 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.

• matrix(<number>, <number>, <number>, <number>, <number>, <number>)
  specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].
• translate(<translation-value>[, <translation-value>])
  specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value..
• translateX(<translation-value>)
  specifies a translation by the given amount in the X direction.
• translateY(<translation-value>)
  specifies a translation by the given amount in the Y direction.
• scale(<number>[, <number>])
  specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
• scaleX(<number>)
  specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
• scaleY(<number>)
  specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
• rotate(<angle>)
  specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.
• skewX(<angle>)
  specifies a skew transformation along the X axis by the given angle.
• skewY(<angle>)
  specifies a skew transformation along the Y axis by the given angle.
• skew(<angle> [, <angle>])
  specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis).

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.

translate()

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.

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/translate.png" alt="" width="119" height="69">
   </figure>
</div>

-webkit-transform: translate(15px, -15px);
-moz-transform: translate(15px, -15px);
-o-transform: translate(15px, -15px);
transform: translate(15px, -15px);

translateX()

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

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/translate_x.png" alt="" width="119" height="69">
   </figure>
</div>

-webkit-transform: translatex(15px);
-moz-transform: translatex(15px);
-o-transform: translatex(15px);
transform: translatex(15px);

translateY()

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

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/translate_y.png" alt="" width="106" height="69">
   </figure>
</div>

-webkit-transform: translatey(-15px);
-moz-transform: translatey(-15px);
-o-transform: translatey(-15px);
transform: translatey(-15px);

scale()

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

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/scale.png" alt="" width="157" height="107">
   </figure>
</div>

-webkit-transform: scale(1.5, 2);
-moz-transform: scale(1.5, 2);
-o-transform: scale(1.5, 2);
transform: scale(1.5, 2);

scaleX()

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)

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/scale_x.png" alt="" width="105" height="55">
   </figure>
</div>

-webkit-transform: scalex(0.5);
-moz-transform: scalex(0.5);
-o-transform: scalex(0.5);
transform: scalex(0.5);

scaleY()

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)

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/scale_y.png" alt="" width="104" height="106">
   </figure>
</div>

-webkit-transform: scaley(2);
-moz-transform: scaley(2);
-o-transform: scaley(2);
transform: scaley(2);

rotate()

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

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/rotate.png" alt="" width="117" height="82">
   </figure>
</div>

-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
transform: rotate(15deg);

skew()

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.

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/skew.png" alt="" width="119" height="62">
   </figure>
</div>

-webkit-transform: skew(15deg, 4deg);
-moz-transform: skew(15deg, 4deg);
-o-transform: skew(15deg, 4deg);
transform: skew(15deg, 4deg);

skewX()

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)

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/skew_x.png" alt="" width="121" height="54">
   </figure>
</div>

-webkit-transform: skewx(15deg);
-moz-transform: skewx(15deg);
-o-transform: skewx(15deg);
transform: skewx(15deg);

skewY()

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).

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/skew_y.png" alt="" width="107" height="67">
   </figure>
</div>

-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.

<div class="outershell">
   <figure>
      <img class="alignnone" title="Translate" src="https://hsrtech.com/wp-content/uploads/2010/11/multiple_transforms.png" alt="" width="171" height="119">
   </figure>
</div>

-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.