Use transform-origin to choose where a CSS rotation, scale, or skew pivots. For example, transform-origin: bottom left; makes a rotation turn around the element’s bottom-left corner instead of its center. For ordinary CSS elements, the default pivot is the center.
What transform-origin changes
The property sets the point around which a transform acts; it does not change the transform function itself. With rotation, that point is the center of rotation. With scaling or skewing, it changes the apparent pivot as the element transforms.
A useful way to picture the operation is: move the chosen origin to (0, 0), apply the transform, then move the origin back. That is why changing the origin can also change the element’s apparent position even when its transform value stays the same. See the MDN transform-origin reference.
How to set the origin
Use one value for a horizontal position, two for horizontal and vertical positions, or three to add a Z offset for a 3D transform. The origin is measured relative to the element’s bounding box, not the viewport.
#1 Best Overall
leftandtopmean0%;centermeans50%;rightandbottommean100%.- Percentages position the origin proportionally within the bounding box. Thus
50% 50%is the box’s center. - Lengths such as
20px 10pxset explicit offsets. - Origins may be outside the box, such as
-20% 120%. - The optional third value is a length on the Z axis. A percentage is invalid for this coordinate.
For two keyword values, use horizontal then vertical positions: left/center/right for X and top/center/bottom for Y. top right and right top both identify the same corner. When mixing a keyword with a numeric offset, make sure the keyword is on the axis you intend.
Choose a pivot for the effect you want
Rotate around a corner or edge
.card {
transform-origin: top left;
transform: rotate(12deg);
}The card rotates around its top-left corner. Replace top left with bottom left, top right, or another edge or corner as needed.
Rank #2
Scale from an edge
.panel {
transform-origin: 50% 100%;
transform: scale(1.1);
}This scales the panel from the center of its bottom edge. Percentages are useful when the element’s dimensions can change because the pivot follows its bounding box.
Use an explicit distance
.badge {
transform-origin: 20px 10px;
transform: rotate(8deg);
}Lengths are useful when the pivot must sit at a specific offset rather than a proportional point. Negative or over-100% percentages can place the pivot beyond an edge.
Set a 3D origin
.cube-face {
transform-origin: center center 30px;
transform: rotateY(35deg);
}The third value offsets the origin along Z. Use a length, not a percentage; center center 30px is valid, while a Z percentage is not. For broader 3D context, see the W3C CSS Transforms Module Level 1.
Defaults and SVG behavior
For ordinary CSS transformable elements, the initial value is 50% 50% 0, so rotation and scaling generally pivot around the center if you omit the property. The property is not inherited.
SVG has a different initial value: it is generally 0 0, except for the root <svg> and an <svg> directly inside <foreignObject>, which use 50% 50%. If an SVG transform pivots unexpectedly, check the element type and set transform-origin explicitly rather than assuming the ordinary CSS default. See MDN’s reference.
Quick troubleshooting
- The element moves when I change the origin. That is expected: the browser translates the selected point to the origin, transforms the element, then translates it back. Check the combined effect of the pivot and transform.
- My pivot is not where I expected. Percentages use the element’s bounding box. Verify the X/Y order and whether a keyword refers to the intended axis.
- A three-value declaration is rejected. The third, Z-axis value must be a length; a percentage is invalid.
- An SVG pivots from a corner instead of the center. SVG’s initial value is commonly
0 0. Set the desired origin explicitly and account for the SVG exceptions above.
Browser availability
MDN marks transform-origin as Baseline Widely available and reports browser availability since September 2015. That broad status does not guarantee every historical implementation detail or uncommon syntax form in every legacy browser; check the live compatibility information if legacy support is a requirement.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteOr skip the browser setup
If you need screenshots to check how a transformed page renders, ScreenshotNeo can capture a URL in one request. Its API supports PNG, JPEG, WebP, and PDF output; its clean-shot flow accepts cookie banners and removes known consent banners, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers indicating the page verdict and billing status. An MCP server provides screenshot tools for AI agents.
For a WebP capture, use this cURL request; replace the URL with the page you want to inspect. See the ScreenshotNeo API documentation for parameters and options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpThe Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
