Grow your CSS skills. Land your dream job.

transform

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.

Rotate

transform: rotate(angle);

Rotates clockwise from current position.

rotate(25deg)

Scale

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

Skew

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

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


skewX(25deg)


skewY(25deg)

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

Translate

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

Matrix

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)
translateZ(z)

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

scale3d(sx, sy, sz)
scaleZ(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).

rotateX(value)
rotateY(value)
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.

matrix3d(…)

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

perspective(value)

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?

Comments

  1. thanks a lot.
    3D Transforms Will be usefull…

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

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

  4. Patrick Bruckner
    Permalink to comment#

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

  5. 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.
      p{
      -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);
      }

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

    `.button:hover{
                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…

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

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".