transform

transform: rotate

Is used to rotate elements.

Compatibility

  • -webkit-transform: rotate Safari 5+, Chrome 10+
  • -ms-transform: rotate Internet Exlorer 9+
  • transform: rotate Firefox 16+ Firefox 16+ Opera 12.1+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

  • Firefox 16+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Internet Explorer 10+
  • Opera 12.1+

General description

The origin of the rotation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: rotate(1 30deg)

  • 1 The element is rotated clockwise by 30 degrees. Negative values result in a counter clockwise rotation.
Example
Inspect me!?

Example

Element rotated counter clockwise

transform: rotate(1 -40deg)

  • 1 The element is rotated counter clockwise by 40 degrees.
Example
Inspect me!?

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform: scale

Is used to scale elements.

Compatibility

  • -webkit-transform: scale Safari 5+, Chrome 10+
  • -ms-transform: scale Internet Exlorer 9+
  • transform: scale Firefox 16+ Firefox 16+ Opera 12.1+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

  • Firefox 16+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Internet Explorer 10+
  • Opera 12.1+

General description

Combined notation

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: scale(1 2, 2 1.5)

  • 1 The scale factor, where 1 stands for the original size, 2 for twice the size, and so on. The element is both scaled horizontally (x-axis) and vertically (y-axis) by the same factor. Negative values mirror the element.
  • 2 Optional. The vertical scale factor. If given the factor noted at 1 stands for the horizontal change. In this case the element gets scaled by the factor 2 horizontally and 1.5 vertically.
Example
Inspect me!?

Horizontal scale

transform: scaleX(1 2)

  • 1 The horizontal scale factor.
Example
Inspect me!?

Vertical scale

transform: scaleY(1 1.5)

  • 1 The vertical scale factor.
Example
Inspect me!?

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform: skew

Is used to tilt elements.

Compatibility

  • -webkit-transform: skew Safari 5+, Chrome 10+
  • -ms-transform: skew Internet Exlorer 9+
  • transform: skew Firefox 16+ Firefox 16+ Opera 12.1+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

  • Firefox 16+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Internet Explorer 10+
  • Opera 12.1+

General description

Combined notation

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: skew(1 30deg, 2 10deg)

  • 1 The element is tilted around the x-axis (horizontally) by 30 degrees. Positive values represent a tilt to left, negative values tilt the element to the right.
  • 2 Optional. The angle for the tilt around the y-axis (vertical). If given the value at 1 represents the angle for a tilt around the x-axis. Positive values tilt the element downwards, negative values represent a tilt to the top. In this case the element gets tilted by 30 degrees horizontally (to the left) and 10 degrees vertically (downwards).
Example
Inspect me!?

Horizontal skew

transform: skewX(1 30deg)

  • 1 The angle for the tilt around the x-axis (horizontal).
Example
Inspect me!?

Vertical skew

transform: skewY(1 10deg)

  • 1 The angle for the tilt around the y-axis (vertical).
Example
Inspect me!?

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform: translate

Is used to move elements. Can also be achived by setting the margin or by positioning the element although translate is the better choice for animating elements.

Compatibility

  • -webkit-transform: translate Safari 5+, Chrome 10+
  • -ms-transform: translate Internet Exlorer 9+
  • transform: translate Firefox 16+ Firefox 16+ Opera 12.1+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

  • Firefox 16+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Internet Explorer 10+
  • Opera 12.1+

General description

Combined notation

The origin of the transformation is at the center of the element. To change the origin see transform-origin. Multiple transformations can be combined.

transform: translate(1 100px, 2 20px)

  • 1 The element is moved 100px to the right. Negative values represent a shift to the left.
  • 2 Optional. The vertical shift. If given the value at 1 stands for the horizontal movement. Positive values move the elements downwards, negative values shift it upwards. In this case the element is moved 100px to the right and 20px down.
Example
Inspect me!?

Horizontal translate

transform: translateX(1 100px)

  • 1 The value for the horizontal shift.
Example
Inspect me!?

Vertical translate

transform: translateY(1 20px)

  • 1 The value for the vertical shift.
Example
Inspect me!?

Example

Multiple transformations combined

transform: rotate(1 33deg) scale(2 1.5)

  • 1 The element is rotated clockwise by 33 degrees.
  • 2 It is also enlarged 1.5 times simultaneously (no comma prefixed!).

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

transform-origin

Sets the origin for transformations of an element.

Compatibility

  • -webkit-transform-origin Safari 5+, Chrome 10+
  • -ms-transform-origin Internet Exlorer 9+
  • transform-origin Firefox 16+ Firefox 16+ Opera 12.1+

Supported by all modern browsers. For detailed compatibility info see caniuse.com.

  • Firefox 16+
  • Safari 5+, Chrome 10+
  • Internet Explorer 9+
  • Internet Explorer 10+
  • Opera 12.1+

General description

transform-origin: 1 left 2 top

  • 1 The horizontal position of the origin for transformations (x-axis). May also be a percentage value where 0% stands for left, 50% for center and 100% for right. Between values are possible as well as length values with the reference point at the top left corner. Negative values are possible in each case. By default the origin of the transformation is both horizontally and vertically at the center of the element (50% 50%).
  • 2 Optional. The vertical position of the origin. 0% stands for top, 100% for right. The rest from 1 also applies here.
Example
Inspect me!?

Example

One value set

transform-origin: 1 right

  • 1 The origin for transformations is horizontally set to the right side and vertically centered (50%).
Example
Inspect me!?

Two percentage values set

transform-origin: 1 25% 2 75%

  • 1 The origin at the x-axis (horizontally) is 25% from the left.
  • 2 The origin for the y-axis (horizontally) is 75% from above.
Example
Inspect me!?

Further reading

For more info see the W3C site, the Safari site and the site at MDN (including compatibility info for older browser versions).

x The live example can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
  • Arthur Corenzan

    I had to say that; best visual explanation ever! Awesome job!

    • Shail Paras

      hi… i have used transform:scale(0.333333,0.333333); …..
      it is working in Chrome fine but in Firefox … border get hide or something….
      i don’t understand what is happening with firefox…. HTML

      #me { width:2in;height:2in;border:0.02in solid #111111;transform:scale(0.333333,0.333333);transform-origin:0,0,0;}

      hello

      thanks in Advance,

    • Chris_Krammer

      Actually it also works in Firefox:
      http://codepen.io/edge0703/pen/aCgbq

      But since you scale it down to just a third with transform:scale(0.333333,0.333333) you can’t see the border anymore, because 1/3 of 0.02in (which is actually just one pixel) is almost equal to zero and thus can’t be displayed. Try to remove the transformation at the above-noted example and you will see that the border reappears.

    • Shail paras

      Thanks Chris…

      Actually i have found other way to do that… without tranformation.

      actually
      i was making a grid with border and also have given option to zoom
      in/out the grid… now i have added different color in all grid boxes…
      so now there is no issue of border.

      thanks again for REPLY…

      and i have learn more from your site…

      thank u very much..

  • Aldash

    Very useful, I bookmarked it.

  • Partus

    Thanks! I bookmarked too.

  • http://realwebdesigns.com/ Filipe Valente

    How would I make it rotate clockwise continuously? thanks

    • http://www.css3files.com Christian Krammer

      What exactly do you mean with “continiously”? An animation or just to rotate an element? If the latter, then it’s just rotate: transform(XXdeg) where “XX” stands for the size of the angle for the rotation. If you mean the former please further specify your question.

    • http://www.brentonstrine.com Brenton Strine

      I think he’s asking how to have it rotate about its axis continually, similar to a little “loading” indicator or something. I assume this takes javascript, but it would be interesting if it could be done with CSS.

    • http://www.css3files.com Christian Krammer

      Involving animations its not that difficult. If you want to know more about that, just drop me a line at the contact form. I might also write a blog post about that.

  • http://www.heavyhookedup.com Brian

    Great, thank you, very useful website.. Thanks again

  • http://www.folkd.com/detail/quizilla.teennick.com%2Fstories%2F19711889%2Fstrompreise-vergleichen-hannover Erwin H.

    Greetings from Florida! I’m bored to death at work so I decided to browse your blog on my iphone during lunch break. I enjoy the info you provide here and can’t wait to take a look when I get home. I’m surprised at how quick your blog loaded on my mobile .. I’m not even using WIFI, just 3G .. Anyways, fantastic blog!

  • ram

    Hi Christian,

    Your website has really proved very helpful for me to learn CSS3. thanks a lot…and it’s really a nice looking site..
    I have a question and that is:

    How to create a comment box like you are using in your website…it’s very clear , good looking comment box and as I am new in coding, I really don’t know how to perform server side coding for comment box.

    Many thanks in advance.

    • http://www.css3files.com Christian Krammer

      It was a tough piece of work to find a solution for the most recent comments since there are no workable plugins as far as I know – and I searched for a really long time. But then I encountered a pretty “dirty” solution which uses a direct query to the WordPress database and retrieves the comments and the related values. Unfortunately I haven’t saved the URL of where I found this solution, but I have e-mailed the file to you. If anybody else is interested just drop me a line.

  • veera

    Very useful, I bookmarked it.

  • Benne

    Sehr Nützlich die Seite.
    Very useful Page

    Greetz from Germany

  • 2pha

    Having anything more than a couple of things skewed on one page and IE9 starts acting up, disappearing content etc. Well…atleast for me..
    9 versions of IE and still they have not got it right….

  • http://pdfcast.org/pdf/moving-to-florida-with-present-day-housing-market-1 document

    Very nice post. I just stumbled upon your
    weblog and wished to say that I have truly enjoyed surfing around your blog
    posts. In any case I’ll be subscribing to your rss feed and I hope you write again very soon!

    • http://www.css3files.com Christian Krammer

      I hope so too! : ) On one hand I need an interesting topic and on the other hand some time. But a new post is already scheduled for the coming days.

  • http://dj247.net/dj DJ

    Very nice post
    thanks

  • Zeron

    Very useful.
    Will you write some examples of perspective?

    • Chris_Krammer

      Since 3D-transformations are a pretty extensive topic and only needed in very special circumstances I didn’t consider it so far. But if there’s a demand for this property I could add it of course.

  • entermilan

    chán quá đi thôi, chán quá đi thôi