How To Use CSS Transform-Origin Property

The CSS transform-origin property allows developers to control the origin point of transformations like rotation and scaling, enabling precise manipulation of element behavior and positioning. With CSS properties like scale() and rotate(), you can make elements spin, scale, and perform various transformations. The CSS transform-origin property lets you control how an element moves and where it rotates from, offering even greater control and flexibility.

What Is Transform-Origin Property in CSS?

In CSS, when the transform() property is applied to an element, the default behavior is to have the center as the transformation point of the element. The default CSS transform-origin property value is 50% and 50%, placing the origin at the element’s center. If you do not specify a transform-origin, any transformation will occur around the element’s center point.

The CSS transform-origin property allows you to change the position of the origin point of an element’s transformations. This property enables you to control how transformations like rotation, scaling, and skewing occur.

Syntax of Transform-Origin in CSS:

CSS transform-origin properties	Description
x-axis	The <x-axis> defines the position of the origin along the horizontal axis. The values can be left, center, right, or a specific length.
y-axis	The <y-axis> defines the position of the origin along the vertical axis. The possible values are top, center, bottom, or a specific length.
z-axis	The <z-axis> is an optional value. It defines the position of the origin along the z-axis in 3D transformations, specified as a length. This parameter is only used while dealing with 3D transformations.

The CSS transform-origin can be specified using one, two, or three values.

Single Value Syntax

When CSS transform-origin is specified with a single value, this value defines the horizontal offset from the origin point of the element. This single value can be specified as a <length>, a <percentage>, or one of the predefined keywords: left, center, right, top, and bottom. The vertical offset defaults to the element’s center unless otherwise defined.

When the CSS transform-origin property is specified with a single value, this value defines the horizontal offset from the origin point of the element. The vertical offset defaults to the center of the element unless otherwise defined.

Here are the types of values you can use for the CSS transform-origin property:

• Length: Specific measurements like 10px, 2em, etc.
• Percentage: A percentage of the element’s dimensions like 50%, 100%, etc.
• Keywords: Predefined keywords like left, center, right, top, and bottom.

For example, suppose you set the CSS transform-origin property to 10% (transform-origin: 10%). In that case, this sets the horizontal offset to 10% of the element’s width from the left edge, with the vertical offset implicitly set to the center of the element.

Two Value Syntax

When you use two values for the CSS transform-origin property, the first value defines the horizontal offset, and the second value defines the vertical offset. Each value can be:

Here are the types of values you can use for the CSS transform-origin property:
Each value can be:

• Length: Specific measurements like 10px, 2em, etc.
• Percentage: Percentage of the element’s dimensions like 50%, 100%, etc.
• Keyword: Predefined keywords like
• For the first (horizontal) value: left, center, right
• For the second (vertical) value: top, center, bottom

For example, suppose you set the CSS transform-origin property to 10% and 30% ( transform-origin: 10%, 30%). In that case, this sets the horizontal offset to 10% of the element’s width and the vertical offset to 30% of the element’s height from their respective edges.

Result:

You can see the difference in the output when the CSS transform-origin property is set, as it changes the point around which the transformation occurs.

Three Value Syntax

The three-value syntax extends the two-value syntax by adding a third value that specifies the Z-axis offset that allows you to add 3D transformations. The first two values follow the same rules as in the two-value syntax, defining the horizontal and vertical offsets. The third value, a <length>, specifies the offset along the Z-axis.

For example, if you have transform-origin: left top 50px, this sets the horizontal offset to the left edge, the vertical offset to the top edge, and moves the transformation origin 50px towards the viewer along the Z-axis.

Result:

Here in the output, you can see that the second box, with the custom transform-origin: top left 50px, undergoes skewing around a point located at the top-left corner of the box and 50px towards the viewer along the Z-axis.

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Result:

When you hover over the <li>, an underline appears. Notice how the transition starts from the center and gradually expands to both sides. This code has no explicit definition of transform-origin, so the transition starts from the center since the default value is the center.

Let’s now add the CSS transform-origin property with a value of left to see the effect.

The transition starts from the left side instead of the center because the CSS transform-origin is set to the left. Similarly, by setting the transform-origin to the right, the transition will start from the right side.

As you can understand from the above three examples, when the CSS transform-origin property is set to a value other than the default, it alters the point around which transformations occur, resulting in a new appearance.

So far, we have learned that the CSS transform-origin property determines the origin of a transformation. However, there’s much more to explore in CSS transformations. Let’s further understand the workings of the CSS transform-origin property.

Above are some of the transformations that are available in CSS. To learn more and understand how transformations and transitions work together, follow this blog on CSS transform and transition properties and get detailed information on using each approach effectively.

How CSS Transform-Origin Works?

All CSS transforms happen based on an origin point, the pivot around which transformations like rotation, scaling, skewing, and translation occur. The CSS transform-origin property is used in conjunction with CSS transforms, allowing you to control or change the point of origin of a transform.

The default values of the transform-origin property are 50% and 50%, which is why all transformations originate from the center of the element.

Consider this example, where there is a square-shaped element, and you apply the CSS rotate() property. The rotation will happen with the element’s center as the rotation point.

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Result:

Desktop and Mobile View:

Similarly, if you specify any other transformation, such as skewing, it will still be applied with the center of the element as the transformation point.

Let us look at what happens when we rotate the element around a point other than the center.

Modifying Transform-Origin

Until now, we have focused on using the center as the origin of transformation. Let’s now learn how the appearance of transformations changes when the origin point is shifted. This shift will introduce noticeable changes in the transformation, opening possibilities for creative animations.

Top Left Corner

Setting the origin to the element’s top left corner using the CSS transform-origin property creates a pivot effect where the element appears to swing from the top left corner.

Let’s take an example and see it in action.

First, let’s update the circular dot to denote the origin. Since the origin is at the element’s top left, you can use the value 0% 0% or simply specify the top left as the value.

Now, we can set the CSS transform-origin property to the top left. Alternatively, you can also specify the value as 0% 0%.

Similarly, if you apply any other transformation, it will occur with respect to the origin, in this case, the top left corner. For example, if skew() is applied to the element, then the skewing will occur to the top left point.

Bottom Right Corner (100% 100%)

By setting the origin to the bottom right corner of the element using the CSS transform-origin, you move the origin point to the right end.

Let’s take an example and see it in action.

For this, you can specify transform-origin: 100% 100% to target the bottom right corner.

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Result:

Desktop View:

By shifting the origin here, you can completely transform the look and feel of the entire process. One practical use case of using the CSS transform-origin property is for creating menu hamburgers, allowing creativity in changing how the hamburger opens and closes.

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Result:

You can also use values like top right and bottom left to target the other two corners and achieve the desired effect. Additionally, you can specify percentage values like 0%, 100% or 100% 0% to target specific corners.

Edges (Around The Corners)

Instead of rotating around a corner, there may be times when elements need to be rotated around a point on their edges. We can achieve this effect by setting the X or Y value to 0%, provided that both the X and Y values are not zero.

To target each edge for transformations, you can adjust the CSS transform-origin property in the following ways:

Set the CSS transform-origin property to 50% 0% for transformations around the top edge. This is because transformations around the top edge effectively position the pivot point at the top of the element, making it ideal for animations that simulate opening or lifting from above.

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Result:

When targeting the bottom edge, change the CSS transform-origin to 50%, 100%. This places the pivot point at the center of the bottom edge.

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Result:

To pivot around the left edge, set the CSS transform-origin to 0% 50%; this adjustment positions the pivot at the middle of the left side, enabling rotations or scaling that seem to hinge from the left.

See the Pen
transform-origin: 0% 50%; by adarsh (@adarsh-gupta101)
on CodePen.

Also, for the transformations around the right edge, set the CSS transform-origin to 100% 50% moves the pivot to the center of the right side.

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Result:

Let’s now visually analyze the difference made by adding a different transform-origin to the element. Just by setting the origin, the entire transformation gets a new look.

See the Pen
Transform origin example by adarsh (@adarsh-gupta101)
on CodePen.

Result:

As you can see, by adding a simple property, you can achieve a variety of rotation effects. You can also select any other point, whether it’s inside or outside element.

Arbitrary Point

While creating custom animations and transformations, there may be some requirements to target some arbitrary point that can be found both inside and outside the element.

If you need to set your origin point outside the element, you can achieve this by setting negative values for the CSS transform-origin property. Having negative values effectively positions the origin point beyond the element’s boundaries.

On the other hand, if you intend to position the origin point inside the element, you can achieve this by using positive percentage values for the CSS transform-origin property.

Positive percentage values allow you to have the origin point relative to the element’s dimensions.

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen.

Result:

In the above example, you can see how we can set a particular point, whether inside or outside the element, to be the point of origin for the transformation. This capability is particularly useful when creating interactive elements like buttons or cards, where you want the transformation to occur around a specific point to enhance the user experience.

The Perspective-Origin Property

CSS perspective property allows you to create 3D transformations by simulating depth and distance on a web page. It creates a viewpoint from which the viewer sees the 3D scene, influencing the perception of scale and depth for transformed elements.

See the Pen
Lambdatest Flow Card by adarsh (@adarsh-gupta101)
on CodePen.

Result:

Below is the main code responsible for displaying the working for perspective-origin property in CSS.

In the above example, you can see that when you hover over the card, it rotates not just in the 2D plane but in the 3D plane, creating a depth-like effect. The higher the value of the perspective-origin property, the greater the perceived distance between the viewer and the 3D scene, leading to a diminished sense of depth and scale.

Conversely, a lower value of the perspective-origin property enhances the perception of depth and scale, resulting in a more immersive and realistic 3D experience.

Additionally, you can update the CSS perspective-origin property to define the point from which the viewer observes the 3D scene. By adjusting the perspective-origin you can control the viewpoint and alter the perspective effect of 3D transformations.

The perspective-origin can take the following values:

• Length Values: The length value allows you to position the precise location that you wish to be the perspective origin in the X and Y axes. Values can be specified using length units such as pixels (px), centimeters (cm), millimeters (mm), or percentages (%).
• Keyword Values: Just like the transform-origin property in CSS, the perspective-origin property also accepts some predefined keywords for positioning the perspective origin relative to the box’s edges or center. The keywords include top, bottom, left, right, center, and their combinations.

Browser Compatibility

The CSS transform-origin property is supported by all modern browsers, including Internet Explorer, Edge, Firefox, Chrome, Safari, and Opera. When creating a custom transformation of an element, the CSS transform-origin should be your first choice.

Join The Waitlist

Source

Ensuring your CSS designs are rendered perfectly across different browsers and devices is crucial, especially when utilizing the CSS transform-origin property.

To validate if your design is responsive across different browsers and devices, you can utilize cloud-based platforms like LambdaTest- It is an AI-powered test execution platform for running manual and automated tests at scale, allowing you to also perform cross-browser testing, including the ability to test on older browser versions, ensuring your design is rendered perfectly across 3000+ real devices, browsers, and OS combinations.

As we have understood in detail, the CSS transform-origin and the CSS perspective-origin help enhance the CSS transform-origin property by creating a 3D transform. Further, you will learn some of the best practices of CSS transformation.

Best Practices for Accessible Transformations

Not all your users will use the latest version of the browser, and different browsers have varying levels of support for various CSS properties.

Let’s explore some accessibility issues associated with CSS transforms and discuss how to address them.

Minimize Motion Effects

Animations and transformations, particularly those involving significant movements, can pose challenges for individuals with vestibular disorders or those susceptible to motion sickness.

Limiting rapid motions or using media queries for reduced motion can improve the user experience for all users, including those with accessibility needs.

You can reduce the extent of transformations by minimizing or even removing all transitions for users who have disabled animation effects on their devices. Using the Accessibility DevTools Chrome extension is a simple method to test, manage, and report accessibility issues, ensuring your website is accessible to all users, including those with disabilities.

The Accessibility DevTools Chrome extension, powered by Axe-core, is offered by LambdaTest to enhance accessibility testing.

Follow the support document on installing LambdaTest Accessibility Toolkit to use the Accessibility DevTools feature. You can also download the Chrome extension directly by clicking the link below.

Add Extension

Watch the following video below to discover how to ensure inclusivity for all users with the Accessibility DevTools Chrome extension.

Ensure Cross Browser Compatibility

Due to variations in browser rendering engines, it’s essential to test transformed content across various modern browsers and devices. This ensures accessibility and functionality remain consistent for all users.

The CSS property –webkit-transform-2d is an example of a non-standard feature that lacks broad browser compatibility. It is supported only by WebKit-based browsers such as Safari and is not supported by Chromium-based browsers like Google Chrome.

Improve Performance using transformations

The CSS transform() property is a preferred method for moving elements on a web page due to position and left/right properties; transform() helps prevent layout shifts and enhances performance. When elements are moved using the transform() property, they are shifted without affecting the layout of surrounding elements, leading to a more efficient rendering process, especially with complex layouts or animations.

Check for CSS responsiveness

CSS transformations, including changes to the transformation origin, can affect a web page’s responsiveness. Transformations might cause elements to extend beyond their container’s boundaries, resulting in overflow problems. This issue is particularly critical on smaller screens where space is limited.

You can utilize the LT Browser tool to test your website’s responsiveness across various viewports, as mentioned in the earlier section.

Conducting thorough, responsive testing can help prevent discrepancies across different screens and browsers, ensuring your website displays correctly on all targeted devices and viewports.

To learn more about LT Browser and how to use it, watch the following video tutorial below.

To learn more about the features offered by the LambdaTest platform, subscribe to the LambdaTest YouTube Channel and stay updated with the latest video tutorials on cross-device testing, smart visual UI testing, and more.

Wrapping Up

CSS transformations are one of the most important and frequently used properties because they enable you to transform elements with just a few lines of code.

In this detailed blog, we have looked into the CSS transform-origin property, which can completely alter the appearance and effect of transformations. We have also explored how modifying the transform-origin property can entirely redefine a transformation, with several examples.

Now you know how to create different types of CSS transformations, not just the predefined ones but also new kinds with the transform-origin property.