Transform-origin property in CSS

The transform-origin property in CSS is used to establish the point around which a transformation is applied to an element. This point serves as the axis of rotation or the spot where scaling or skewing begins. The element’s origin point remains locked in place while the rest of the element transforms around it. It’s not apply to the translate() function, as the whole element moves during a translation.

The point of origin for transformations is the exact center of the element. This default is equivalent to 50% 50% or center center. For 3D transformations, the default origin along the z-axis is 0.

It can changes behavior using the transform-origin property.

2D Transforms

For 2D transformations, the transform-origin property can take one or two values:

One value: This value sets the horizontal origin. The vertical origin will default to center or 50%.
Two values: The first value sets the horizontal (x-axis) origin, and the second value sets the vertical (y-axis) origin.

Values

Keywords: left, right, top, bottom, and center. Keywords like left, right, and center are used for the horizontal axis, while top, bottom, and center are used for the vertical axis.
Percentages: A percentage value is relative to the element’s height (for the vertical value) or width (for the horizontal value). For example, 0% is the left or top edge, 100% is the right or bottom edge, and 50% is the center.
Length units: Any accepted CSS length unit (e.g., px, em) can be used. Length values are measured from the top-left corner of the element’s bounding box.

Keywords can often be used in place of percentage values; for instance, left top is equivalent to 0 0, and right center is equivalent to 100% 50%.

Examples (2D):

By default, a rotation happens around the center. The code below rotates a div by 45 degrees clockwise around its center:

To change the origin of rotation, you use transform-origin. This example sets the origin to the middle of the right side:

<!DOCTYPE html>
<html>
<head>
<style>
.aa{ 
transform:rotate(30deg);
 transform-origin: 30% 90%;
 } 
</style>
</head>
<body>
    <h1 class="aa">Hello, World!</h1>
    <p>This is a simple HTML5 document.</p>
    <div class="box">A styled box</div>
</body>
</html>

Another example shows different origins for rotation:

h2 { transform: rotate(-10deg); } /* Default origin: center center */
h2.example-1 { transform-origin: left center; } /* Origin at the vertical center of the left edge */
h2.example-2 { transform-origin: 100% 50%; } /* Same as left center, using percentages */

For scaling, the default is to produce away from or shrink inwardly towards the center. Changing the transform-origin alters this.

3D Transforms

For 3D transformations, the transform-origin property can take up to three values: x, y, and z.

The first two values (x and y) behave the same as in 2D, accepting keywords (left, right, center for x; top, bottom, center for y), length units, or percentages. The default is center center or 50% 50%.
The third value (z) is a length value (percentage and keyword values are not used or supported for the z-axis in standard transform-origin), which sets the distance along the z-axis where the transformation will happen. A negative value places the origin behind the element (making the element appear in front of its parent), while a positive value places the origin in front of the element (making the element appear behind its parent). The default z value is 0.

To view 3D transformations correctly, the parent element needs the transform-style property set to preserve-3d, ensures children are positioned in 3D space rather than crushed onto a 2D plane.

Examples (3D):

Examples showing the effect of different 3D transform-origin values:

<!DOCTYPE html>
<html>
<head>
<style>
.aa{ 
transform:rotateX(60deg);
 transform-origin:10% 10% 50px;
 } 
</style>
</head>
<body>
    <h1 class="aa">Hello, World!</h1>
    <p>This is a simple HTML5 document.</p>
    <div class="box">A styled box</div>
</body>
</html>

CSS3 Topics

Page Content

Tutorials