15800 2012-01-30 23:55:26 +0000 Add example to clarify how transform-origin is applied to elements 2012-04-25 16:34:39 +0000 1 1 1 Unclassified CSS Transforms unspecified PC All RESOLVED FIXED P2 normal --- 1 dschulze dschulze ayg cmarrin dino dschulze eoconnor smfr oldest_to_newest 63370 0 dschulze 2012-01-30 23:55:26 +0000 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' 63934 1 dschulze 2012-02-09 19:16:55 +0000 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. 64421 2 ayg 2012-02-22 15:05:58 +0000 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.) 64733 3 smfr 2012-02-29 17:01:40 +0000 Do we still need this bug to be open? I think the spec is fairly clear. 64734 4 dschulze 2012-02-29 17:04:06 +0000 I'll add a short example this week. Just to make sure. 66956 5 1122 dschulze 2012-04-24 04:57:03 +0000 Created attachment 1122 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? 67027 6 dschulze 2012-04-25 16:34:39 +0000 I added an example how to apply transform-origin to the spec. Closing this bug now. 1122 2012-04-24 04:57:03 +0000 2012-04-24 04:57:03 +0000 Applying the transform-origin property (SVG) origin.svg image/svg+xml 1729 dschulze PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRw Oi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNzM1IiBoZWlnaHQ9IjI1MCI+CiAgPGRl ZnM+CiAgICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwogICAgICByZWN0IHsgZmls bDogIzAwYTZmZjsgfQogICAgICAKICAgICAgbGluZSwgcGF0aCB7CiAgICAgICAgZmlsbDogbm9u ZTsKICAgICAgICBzdHJva2U6IGJsYWNrOwogICAgICAgIHN0cm9rZS13aWR0aDogMXB4OwogICAg ICAgIHN0cm9rZS1kYXNoYXJyYXk6IDYgNDsKICAgICAgICBtYXJrZXItZW5kOiB1cmwoI21hcmtl cik7CiAgICAgIH0KICAgICAgCiAgICAgIGNpcmNsZSB7ICBmaWxsOiBibGFjazsgfQogICAgICAK ICAgICAgdGV4dCB7CiAgICAgICAgZm9udC1zaXplOiAxMXB0OwogICAgICAgIGZvbnQtZmFtaWx5 OiBzYW5zLXNlcmlmOwogICAgICB9CiAgICAgIF1dPgogICAgPC9zdHlsZT4KICAgIDxtYXJrZXIg aWQ9Im1hcmtlciIgdmlld0JveD0iMCAwIDEwIDEwIiByZWZYPSIxIiByZWZZPSI1IiAKICAgICAg bWFya2VyVW5pdHM9InN0cm9rZVdpZHRoIiBvcmllbnQ9ImF1dG8iCiAgICAgIG1hcmtlcldpZHRo PSI3IiBtYXJrZXJIZWlnaHQ9IjExIj4KICAgICAgPHBvbHlsaW5lIHBvaW50cz0iMCwwIDEwLDUg MCwxMCAxLDUiIGZpbGw9ImJsYWNrIiAvPgogICAgPC9tYXJrZXI+CiAgPC9kZWZzPgogIDx0ZXh0 IHg9IjQwIiB5PSIyMTAiPkFwcGx5IHRyYW5zZm9ybS1vcmlnaW48L3RleHQ+CgogIDxyZWN0IHg9 IjMwIiB5PSI2MCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIC8+CiAgPGNpcmNsZSBjeD0iMzAi IGN5PSI2MCIgcj0iNCIgLz4KICA8bGluZSB4MT0iMzAiIHkxPSI2MCIgeDI9IjgwIiB5Mj0iMTEw IiAvPgogIAogIDxyZWN0IHg9IjE1MCIgeT0iNjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiAv PgogIDxjaXJjbGUgY3g9IjIwMCIgY3k9IjExMCIgcj0iNCIgLz4KICAKICA8bGluZSB4MT0iMjYw IiB5MT0iNDAiIHgyPSIyNjAiIHkyPSIxODAiLz4KCiAgPHRleHQgeD0iMjgwIiB5PSIyMTAiPkFw cGx5IHRyYW5zZm9ybTwvdGV4dD4KICA8dGV4dCB4PSIzMDUiIHk9IjIzNSI+ZnVuY3Rpb25zPC90 ZXh0PgogICAgCiAgPHJlY3QgeD0iMjkwIiB5PSI2MCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAi IHRyYW5zZm9ybT0icm90YXRlKDQ1LCAzNDAsIDExMCkiIC8+CiAgPGNpcmNsZSBjeD0iMzQwIiBj eT0iMTEwIiByPSI0IiAvPgogIDxwYXRoIGQgPSAiTSAzMjAgMTEwIEEgMjAgMjAsIDAsIDEsIDEs IDM0MCAxMzAiIC8+CiAgCiAgPGxpbmUgeDE9IjQyMCIgeTE9IjQwIiB4Mj0iNDIwIiB5Mj0iMTgw IiAvPgoKICA8dGV4dCB4PSI0NzUiIHk9IjIxMCI+VW5hcHBseSB0cmFuc2Zvcm0tb3JpZ2luPC90 ZXh0PgoKICA8cmVjdCB4PSI0NTAiIHk9IjYwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdHJh bnNmb3JtPSJyb3RhdGUoLTQ1LCA1MDAsIDExMCkiIC8+CiAgPGNpcmNsZSBjeD0iNTAwIiBjeT0i MTEwIiByPSI0IiAvPgogIDxsaW5lIHgyPSI0NTAiIHkyPSI2MCIgeDE9IjUwMCIgeTE9IjExMCIg Lz4KICAKICA8cmVjdCB4PSI2MDUiIHk9IjYwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdHJh bnNmb3JtPSJyb3RhdGUoLTQ1LCA2NTUsIDExMCkiIC8+CiAgPGNpcmNsZSBjeD0iNjA1IiBjeT0i NjAiIHI9IjQiIC8+Cjwvc3ZnPg==