Bugzilla – Bug 15800
Add example to clarify how transform-origin is applied to elements
Last modified: 2012-04-25 16:34:39 UTC
transform-origin translates the coordinate space in order to apply transformations and undo the translation afterwards. Should the 'transform-origin' get applied to each transformation function or the whole list of transformation functions.
From http://www.w3.org/Graphics/SVG/WG/wiki/FX-Taskforce/2DTransformsToDoList :
(1) effects the transform list of an element OR (2) effects specific all roate and scale individually in the transform list.
e.g. T rotate(...) translate(...) scale(...) T' OR T rotate(...) T' translate(...) T scale(...) T'
It seems like there is already consensus that 'transform-origin' is similar to a translate at the beginning and a translation back at the end of the transformation list on implementations. Maybe we have to make it more explicit.
There's no difference. If you apply the translation before and after the whole list, or before and after each transform, you get the same effect, because all the translations in the middle pair off and cancel. For instance, with
transform: rotate(45deg) scale(2);
transform-origin: 10px -10px;
there is no difference between
translate(-10px, 10px) rotate(45deg) scale(2) translate(10px, -10px)
translate(-10px, 10px) rotate(45deg) translate(10px, -10px)
translate(-10px, 10px) scale(2) translate(10px, -10px)
because the two middle transforms cancel. (Group-theoretically, conjugation distributes over multiplication.)
Do we still need this bug to be open? I think the spec is fairly clear.
I'll add a short example this week. Just to make sure.
Created attachment 1122 [details]
Applying the transform-origin property (SVG)
A short demonstration how the transform-origin property gets applied. This will be embedded in the following example:
height: 100px; width: 100px;
transform-origin: 50px 50px;
<p>The 'transform-origin' property moves the point of origin by 50 pixels in
both the X and Y directions. The transform rotates the element
clockwise by 45° about the point of origin. After all
transform functions were applied, the translation of the origin gets
translated back by -50 pixels in both the X and Y directions.</p>
<div class="figure"> <img alt="The point of origin gets translated temporary" src="newImage.png"></div>
placed between the current Examples 1 and 2.
I added an example how to apply transform-origin to the spec. Closing this bug now.