This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 15800 - Add example to clarify how transform-origin is applied to elements
Summary: Add example to clarify how transform-origin is applied to elements
Status: RESOLVED FIXED
Alias: None
Product: CSS
Classification: Unclassified
Component: Transforms (show other bugs)
Version: unspecified
Hardware: PC All
: P2 normal
Target Milestone: ---
Assignee: Dirk Schulze
QA Contact:
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2012-01-30 23:55 UTC by Dirk Schulze
Modified: 2012-04-25 16:34 UTC (History)
6 users (show)

See Also:

Attachments
Applying the transform-origin property (SVG) (1.69 KB, image/svg+xml)
2012-04-24 04:57 UTC, Dirk Schulze 		Details

Description Dirk Schulze 2012-01-30 23:55:26 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'
Comment 1 Dirk Schulze 2012-02-09 19:16:55 UTC 
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.
Comment 2 Aryeh Gregor 2012-02-22 15:05:58 UTC 
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)

and


  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.)
Comment 3 Simon Fraser 2012-02-29 17:01:40 UTC 
Do we still need this bug to be open? I think the spec is fairly clear.
Comment 4 Dirk Schulze 2012-02-29 17:04:06 UTC 
I'll add a short example this week. Just to make sure.
Comment 5 Dirk Schulze 2012-04-24 04:57:03 UTC 
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:

<div class="example">
   <pre>div {
    height: 100px; width: 100px;
    transform-origin: 50px 50px;
    transform: rotate(45deg);
}
</pre>

   <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>

</div>

placed between the current Examples 1 and 2.

Any thoughts?
Comment 6 Dirk Schulze 2012-04-25 16:34:39 UTC 
I added an example how to apply transform-origin to the spec. Closing this bug now.