CSS transform-origin Property

The CSS transform-origin property, as its name implies, defines where a transform originates from. The initial (default) value for transform-origin is 50% 50% 0, which is the center of the element. A transform that originates from the center is often what we’re after, but the property can come-in handy if you’re trying to create transforms that are a little more intricate.

You can define an origin for the horizontal as well as for the vertical axis, and if only one value is provided it will be applied to both axes. Values can be provided as length values (px, em,…), percentage values (%) or as keyword values between the following:

  • top
  • right
  • center
  • bottom
  • left

When unit values are provided, the first value is for the horizontal axis (x-offset) and the second is for the vertical axis (y-offset). For example, the following will place the center of rotation at 50% on the horizontal axis and 85% on the vertical axis:

.some-element {
  transform: rotate(75deg);
  transform-origin: 50% 85%;
}

When using keyword values, you can provide the values in a different axis order if there can be no confusion between the two. For example, the following is valid:

.some-element {
  transform: rotate(75deg);
  transform-origin: top left;
}

3D transforms

A third value can also be provided for the offset on the z-axis, which is handy for 3D transforms:

.some-fancy-element {
  transform: rotate3d(-1, 2, 1, 30deg);
  transform-origin: 10% 80% 140px;
}

Note that the 3rd value (the z-offset) has to be a length and can't be a percentage value.

Simple Example

Here’s a simple example to illustrate where we have three images with a rotation transform applied (transform: rotate(…)).

You can use the slider to change the degrees of rotation and the little fuchsia dots show where the transform origin is located for each image:

With transform-origin at 50% 50%
with transform-origin at 10% 20%
with transform-origin at top right

As you can see the effect of the rotation is different for all three images, due to the different values of their transform-origin property.

Or first image doesn’t use a value so the initial value is being used (50% 50% 0), our second uses a value of 10% 70% for an origin that’s 10% on the horizontal axis and 70% from the vertical axis, and our third image uses a value of top right:

.example-1, .example-2, .example-3 {
  transform: rotate(45deg);
}
.example-2 {
  transform-origin: 10% 70%;
}
.example-3 {
  transform-origin: top right;
}
  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#