Treehouse: Grow your CSS skills. Land your dream job.


Last updated on:

The CSS transform property allows you to visually manipulate element, literally transforming their appearance.

div {
  transform: transform-function || none; /* can list multiple, space-separated */

or with proper prefixes:

div {
  -webkit-transform: value;
  -moz-transform:    value;
  -ms-transform:     value;
  -o-transform:      value;
  transform:         value;

There are several different transform functions each that applies a different visual effect. Note that the actual space on the page that the element occupies remains the same as before transition.


transform: rotate(angle);

Rotates clockwise from current position.



transform: scale(value, [value]);

Affects the size of the element. Those scale values are "unitless" meaning it's essentially a multiplier. In the above syntax, if you apply one value it will stretch the element in both directions. So, scale(2) means "make it twice as big as it just was." Giving it two values means to stretch it horizontally by the first value and vertically by the second. Or you can be more specific by:

transform: scaleX(value);
transform: scaleY(value);


transform: skewX(value);  /* e.g. skewX(25deg) */
transform: skewY(value);

Tilts an element one way or another. Like turning a rectangle into a parallelogram.



There is no shorthand for skew, use the specific two functions above.


transform:  translate(value [, value]);

Moves an element sideways or up and down. Why not just use top/left/bottom/right? Well it's a bit confusing at times. I would think of those as layout/positioning (they have better browser support anyway) and this as a way to move those things around as part of a transition or animation. Using translate will be hardware accelerated while those positioning values wouldn't be, which is a bonus.

transform: translate(value [, value]);

These values would be any length value, like 10px or 2.4em. One value will move the element to the right (negative values to the left). If a second value is provided, that second value will move it down (negative values up). Or you can get specific:

transform: translateX(value);
transform: translateY(value);


The matrix transform function can be used to combine all transforms into one. It's a bit like transform shorthand, only I don't believe it's really intended to be written by hand. There are tools out there like The Matrix Resolutions which can convert a group of transforms into a single matrix declaration. Perhaps in some situations this can reduce file size, although author-unfriendly micro optimizations like that are likley not worth your time.

For the curious, this:

rotate(45deg) translate(24px, 25px)

can also be represented as:

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D Transforms

Most of the above properties have 3D versions of them.

translate3d(x, y, z)

The third value in translate3d or the value in translateZ moves the element toward the viewer, negative values away.

scale3d(sx, sy, sz)

The third value in scale3d or the value in scaleZ affects the scaling along the z-axis (e.g. the imaginary line coming straight out of the screen).

rotate3d(x, y, z)

rotateX and rotateY will rotate an element in 3D space around those axises. rotate3d allows you to specify a point in 3D space in which to rotate the element around.


A way to programmatically describe a 3D transform in a 4x4 grid. Nobody will ever hand write one of these ever.


This value doesn't affect the element itself, but it affects the transforms of descendent elements 3D transforms, allowing them to all have a consistent depth perspective.

More Information

Related Properties

Browser Support

2D Transforms

Chrome Safari Firefox Opera IE Android iOS
Any 3.1+ 3.5+ 10.5+ 10+ ? At least 4


3D Transforms

Chrome Safari Firefox Opera IE Android iOS
10+ 4+ 12+ none 10+ ? 5?


  1. shahryar
    Permalink to comment#

    thanks a lot.
    3D Transforms Will be usefull…

  2. Cameron

    Hi, I dont understand the ScaleZ, in transform, if u change the scaleX(2) it will scale the width, but we have not the depth value of the element so scaleZ(3) meanse 3 * 0 = 0

    so scaleZ has no effect on element

  3. Martin Ansty
    Permalink to comment#

    A quick note that rotate3d() actually takes 4 arguments like so:

    rotate3d(x, y, z, a)

    Where the first three arguments describe a point in 3d space around which you wish to rotate; and the fourth an angle by which to rotate the element.

    • Martin Ansty
      Permalink to comment#

      In actual fact the first three arguments are a vector describing the axis of rotation. ie they take a unitless <number> not a <length>

    Permalink to comment#
  5. Patrick Bruckner
    Permalink to comment#

    -webkit-transform: rotate(-2deg);
    This will not occupy its original space in Webkit-Browsers… Causes some problems for me

  6. Dimi
    Permalink to comment#

    Is there a way to scale the text inside that box as well?

    • Lakshya
      Permalink to comment#

      Yeah we can just take an element like p. then generate code.
      -moz-transform: skewX(12deg) skewY(32deg);
      -webkit-transform: skewX(12deg) skewY(32deg);
      -o-transform: skewX(12deg) skewY(32deg);
      -ms-transform: skewX(12deg) skewY(32deg);
      transform: skewX(12deg) skewY(32deg);

  7. gujrit singh

    Facing problem while applying transform(translation) on button:hover ?? Does anyone have solution or faced similar problem.??
    This is coding of my css file

                cursor: pointer;
                transform: translate(3px,3px);
                box-shadow: none;    
    • Victor_S
      Permalink to comment#

      Transform is not available in all browsers becouse its new css property. So you must do it cross browser.
      Use -moz-transform for Mozila FireFox, -webkit-transform for Safari,Chrome…

  8. Victor_S
    Permalink to comment#

    Why this 2 codes are the same? I agree about rotate in both but tanslate in matrix must be 24,25 instead of -0.7071067811865497, 34.648232278140824.

      1) rotate(45deg) translate(24px, 25px) 
      2)matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

    1) rotate(45deg) translate(24px, 25px)
    2) matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

  9. fdkitamory
    Permalink to comment#

    2D Transforms work in IE 9+ , works through prefix -ms-

  10. Nishant
    Permalink to comment#

    Can you give me a way to 3d rotate in Adobe Flash CS3 .It can be some code , etc..

  11. Ahmed Mahmoud
    Permalink to comment#

    really cool :)
    thanks for your time

  12. Ruud Bakker

    It seems that a positive value of skewX is counter-clockwise, as opposed to the values for rotateX, which are clockwise. Very strange I think, so your example of skewX(25deg) is wrong.

  13. Varun
    Permalink to comment#

    The scale property makes the image scale from wish and heighthe zero.

    I am using scroll to scale up or down. But as soon as I start scrolling the image goes to probably one pixel and scales according to that.

    Is there a 0 to 100 property to manipulate “scale” to make it like 100 to 110?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";