transform-origin

Overview

The transform-origin property determines the reference point for an element's transformations in both 2D and 3D space. By modifying these coordinates, you can alter the pivot point around which transformations such as rotation and scaling occur, relative to the element's dimensions and position. In combination with other transformation properties, transform-origin contributes to creating diverse and complex visual effects.

Examples and Usage

Let's demonstrate the impact of the transform-origin property on an element's transformations, such as rotation. We'll showcase the usage of keywords, length, and percentage values for defining the origin point.

HTML Structure

We'll be using nested div elements where each inner div has its own class so we can show the different transform-origin effects.

<div class="container">
  <div class="wrap">
    <div class="element element-1">
      50% 50% (default)
    </div>
  </div>
  <div class="wrap">
    <div class="element element-2">
      bottom right      
    </div>
  </div>
  <div class="wrap">
    <div class="element element-3">
      10% 45%       
    </div>
  </div>
  <div class="wrap">
    <div class="element element-4">
      90px 30px       
    </div>
  </div>
</div>

CSS Styling

Now, let's apply various transform-origin values to the elements in our example and see how their transformation behavior changes. In addition, we're also styling the general appearance of these elements for better visualization.

body {
  /* Basic styling for the body element */
  background-color: #FFFFFF;
  color: #390d0d;
  font-size: 16px;
  font-family: 'UI Monospace', monospace;
}

.container {
  /* Centered container with a max-width for better layout */
  margin: 40px auto;
  max-width: 800px;
}

.wrap {
  /* Each wrap div has a width, height, and a centered margin for spacing */
  width: 150px;
  height: 150px;
  border: 1px solid black;
  display: inline-block;
  margin: 100px;
}

.element {
  /* Each element div is rotated 60 degrees around a pivot point */
  width: 150px;
  height: 150px;
  position: relative;
  color: white;
  text-align: center;
  line-height: 150px;
  transform: rotate(60deg)
}

.element-1 {
  /* The default transform-origin is in the center (50% 50%) */
  background-color: red;
}

.element-2 {
  /* The transform-origin is in the bottom right corner */
  background-color: green;
  transform-origin: bottom right;
}

.element-3 {
  /* The transform-origin is 10% from the left and 45% from the top */
  background-color: orange;
  transform-origin: 10% 45%;
}

.element-4 {
  /* The transform-origin is 90px from the left and 30px from the top */
  background-color: blue;
  transform-origin: 90px 30px;
}

In our example above, we observe the effect of the transform-origin property on the rotation of four distinct elements, each with a unique class and transform-origin value:

• For .element-1, the default value of 50% 50% places the pivot point at the center of the element, causing it to rotate around its own center.

• For .element-2, the keyword value bottom right moves the pivot point to the bottom right corner of the element, changing the rotation to occur around that corner.

• For .element-3, the percentage value 10% 45% sets the pivot point 10% from the left and 45% from the top of the element, making the element rotate around that specific point.

• For .element-4, the length value 90px 30px places the pivot point 90 pixels from the left and 30 pixels from the top of the element, resulting in rotation around that exact point.

Note that this property can be used in conjunction with other transform functions, such as scale, skew, and translate.

Values

The transform-origin property accepts the following values:

Note: When only one value is provided, it applies to both the x and y axes. If three values are provided, they apply to the x, y, and z axes in that order. Moreover, the transform-origin property doesn't affect the actual position of the element, only the point around which transformations occur.

Associated Properties

• transform
• transform-style
• perspective-origin
• perspective

Tips and Tricks

• The transform-origin property doesn't inherit from its parent element. If you want a child element to share the same transform-origin as its parent, you must explicitly set it.

• Remember that the initial value for transform-origin is 50% 50%, which places the origin at the center of the element.

• The order of x-offset and y-offset values only matters when using mixed keywords and length values. For example, transform-origin: left bottom; and transform-origin: bottom left; result in different origins.

• For 3D transforms, the third value in transform-origin specifies the depth.

• Keywords can be particularly useful when you want to set the origin relative to the element's dimensions, rather than in fixed units.

• Avoid using percentages for z-offset; it will make the statement invalid. Use a <length> instead.

Browser Compatibility

Older versions of Chrome, Safari, Firefox, Opera, and IE require vendor prefixes for proper functioning. (see more in Useful Resources below)

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: transform-origin

CSS Transforms Module Level 1 Specification - transform-origin