The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.

.box {
  transform: rotate(360deg);
  transform-origin: top left;

As indicated above, the transform-origin property can take up to two space-separated keyword or length values for a 2D transform and up to three values for a 3D transform.

Using the code above on a 200px by 200px box, with the transform applied to a transitioned using a click event, would behave like this:

Check out this Pen!

By default, the origin of a transform is "50% 50%", which is exactly in the center of any given element. Changing the origin to "top left" (as in the demo above) causes the element to use the top left corner of the element as a rotation point.

Values can be lengths, percentages or the keywords top, left, right, bottom, and center.

The first value is the horizontal position, the second value is the vertical, and the third value represents the position on the Z axis. The third value will only work if you are using 3D transforms, and it cannot be a percentage.

Related Properties

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
4+ 3.1+ 3.5+ 10.5+ 9+ 2.1+ 3.2+


  1. User Avatar
    rohan Saka
    Permalink to comment#

    Css- is really usefull for web designers.. :)

  2. User Avatar
    Permalink to comment#

    what jquery library should i use for this code?

    • User Avatar
      Permalink to comment#

      None, it’s pure CSS.

    • User Avatar
      Benjamin Reid
      Permalink to comment#

      You’d be best of using, pretty good for implementing these transforms.

    • User Avatar
      Brian Ellis

      Unless you’re talking about fallback coding CSS tricks are for CSS tricks, rarely is JS used anywhere for the actual affect. If you refer to Codepen you can see there is minimal JS and no libraries are used. This would defeat the CSS workaround in the first place. As such though besides IE9(and lower) vendor prefixes should support all other browsers for these methods in most cases.

    • User Avatar
      Permalink to comment#

      Welcome to CSS Tricks!

  3. User Avatar
    Permalink to comment#

    Hi. I’m wondering if this might be a way solve an issue I’m having.

    I’ve used transform: scale(.5,.5); but my margins behave as though the item has not been scaled. When I resize the browser, the left margin cause the item to push away from the edge. When I inspect elements and turn off the transform, I can see that the item is reacting to the original size (pre-transform).

    Is there a way to use transform-origin to correct this? I tried transform-origin: 25%50%; however the problem persists, just at different proportions.

    I am referring to the bottom image on this page:

    • User Avatar
      Permalink to comment#

      Did you ever find out the solution to this?
      Because this is the EXACT problem that I am having….

  4. User Avatar
    whole cat
    Permalink to comment#

    Tell me, please, can i specify transform-origin for rotation only and disable this effect for other properties.

  5. User Avatar
    Gopal Sharma
    Permalink to comment#

    Hello ,
    This is good, but can anybody help me for this complicated task…
    I want to make a div which have bottom-right corner edge is longer then the Top-right corner edge(i.e.. Lower line is longer than the upper one). How can achieve this ?

  6. User Avatar
    Permalink to comment#

    Well I’ve been looking for this all freaking day. Thanks Chris.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.