transform-origin

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:

<div class="box"></div>

<button>click me</button>

.box {
  background: lightblue;
  width: 200px;
  height: 200px;
  margin: 20px auto;
  transition: transform 1s linear;
  transform-origin: top left;
  transform-style: preserve-3D;
}

.box-rotate {
  transform: rotate(360deg);
}

button {
  display: block;
  margin: auto;
}

$('button').click(function () {

  $('.box').toggleClass('box-rotate');

});

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

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

• transform
• transform-style

Browser Support