Loading…
Dataset 20260827-2142-2f1b575 · measured 2026-08-27 21:42 UTC
transform-origin
≈below the visible thresholdcss-transforms-1
Differs from Chrome only inside the measured anti-aliasing band (maximum channel distance 3 of 255). Curves, rotation and gradients land here.
What the specification says
- Initial value
- 50% 50%
- Applies to
- transformable elements
- Inherited
- no
- Percentages
- refer to the size of reference box
- Computed value
- see background-position
- Syntax
- [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>? | [ [ center | left | right ] && [ center | top | bottom ] ] <length>?
The measurements
Each example is one declaration on a small page, drawn by Chrome and by our engine. Drag the handle to wipe between them.
transform-origin:left top≈below the visible threshold
Our renderChrome80 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 80
- Max channel delta
- 3
transform-origin:left top 20px≈below the visible thresholdOur renderChrome80 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 80
- Max channel delta
- 3
transform-origin:left bottom≈below the visible threshold
Our renderChrome46 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 46
- Max channel delta
- 3
transform-origin:left 20px≈below the visible threshold
Our renderChrome48 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 48
- Max channel delta
- 3
transform-origin:right top≈below the visible threshold
Our renderChrome41 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 41
- Max channel delta
- 3
transform-origin:20px top≈below the visible threshold
Our renderChrome42 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 42
- Max channel delta
- 3
transform-origin:left≈below the visible threshold
Our renderChrome75 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 75
- Max channel delta
- 3
transform-origin:left center≈below the visible thresholdOur renderChrome75 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 75
- Max channel delta
- 3
transform-origin:left 50%≈below the visible thresholdOur renderChrome75 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 75
- Max channel delta
- 3
transform-origin:right≈below the visible threshold
Our renderChrome47 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 47
- Max channel delta
- 3
transform-origin:right center≈below the visible threshold
Our renderChrome47 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 47
- Max channel delta
- 3
transform-origin:20px≈below the visible threshold
Our renderChrome51 pixels differ from Chrome, the largest by 3 of 255 on one channel.
- Differing pixels
- 51
- Max channel delta
- 3
Which values were measured
“Supported” on one example means “supported at the value we tried”. The property’s declared grammar has 21 branches; 12 of them carry a measurement. The publishing ceiling is 12 examples per property — a branch past it is left out by our choice, not by accident.
| Value | Measured |
|---|---|
| left | ≈below the visible threshold |
| center | not measured |
| right | ≈below the visible threshold |
| top | not measured |
| bottom | not measured |
| 20px | ≈below the visible threshold |
| 50% | not measured |
| left top | ≈below the visible threshold |
| center top | not measured |
| right top | ≈below the visible threshold |
| 20px top | ≈below the visible threshold |
| 50% top | not measured |
| left center | ≈below the visible threshold |
| left bottom | ≈below the visible threshold |
| left 20px | ≈below the visible threshold |
| left 50% | ≈below the visible threshold |
| left top 20px | ≈below the visible threshold |
| center center | not measured |
| right center | ≈below the visible threshold |
| center bottom | not measured |
| center center 20px | not measured |
Tests in the suite that name this property
Secondary evidence: 110 Web Platform Tests carry a spec anchor pointing at this property. Only 1,254 tests in the whole corpus carry such an anchor, so an empty list here means nothing at all.
✕css/css-transforms/css-transform-scale-001-manual.html✓css/css-transforms/css-transform-scale-002.html✓css/css-transforms/transform-inherit-origin-001.html✓css/css-transforms/transform-inherit-origin-002.html✓css/css-transforms/transform-origin-001.html✓css/css-transforms/transform-origin-002.html✓css/css-transforms/transform-origin-003.html✓css/css-transforms/transform-origin-004.html✓css/css-transforms/transform-origin-005.html✓css/css-transforms/transform-origin-006.html✓css/css-transforms/transform-origin-007.html✓css/css-transforms/transform-origin-008.html
+ 28 more
Measured against Chrome 148.0.7778.96 on 2026-08-27, with up to 40 candidate values tried per property. All properties · How the measurement works