Skip to content

Commit f578f7e

Browse files
dirkschulzedirkschulze
committed
Clarify horizontal and vertical origin on transform-origin property.
1 parent a8593ef commit f578f7e

3 files changed

Lines changed: 63 additions & 44 deletions

File tree

‎css3-transforms/ChangeLog‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
2012-04-29 dschulze@adobe.com
2+
Clarify horizontal and vertical origin on transform-origin property.
3+
More style cleanup and corrections.
4+
15
2012-04-26 dschulze@adobe.com
26
More unification of style on example images.
37

‎css3-transforms/Overview.html‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,14 @@
3939

4040
<h1>CSS Transforms</h1>
4141

42-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 April 2012</h2>
42+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 29 April 2012</h2>
4343

4444
<dl>
4545
<dt>This version:
4646

4747
<dd> <a
48-
href="http://www.w3.org/TR/2012/ED-css3-transforms-20120427/">http://dev.w3.org/csswg/css3-transforms/</a>
49-
<!--http://www.w3.org/TR/2012/WD-css3-transforms-20120427/-->
48+
href="http://www.w3.org/TR/2012/ED-css3-transforms-20120429/">http://dev.w3.org/csswg/css3-transforms/</a>
49+
<!--http://www.w3.org/TR/2012/WD-css3-transforms-20120429/-->
5050

5151
<dt>Latest version:
5252

@@ -262,8 +262,8 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
262262
class=property>gradientTransform</code>&rsquo; and &lsquo;<code
263263
class=property>patternTransform</code>&rsquo; attributes</a>
264264

265-
<li><a href="#svg-transform-functions"><span class=secno>12.4.
266-
</span>SVG transform functions</a>
265+
<li><a href="#svg-transform-functions"><span class=secno>12.4. </span>
266+
SVG transform functions </a>
267267

268268
<li><a href="#svg-three-dimensional-functions"><span class=secno>12.5.
269269
</span>SVG and 3D transform functions</a>
@@ -1190,22 +1190,24 @@ <h2 id=transform-origin-property><span class=secno>7. </span> The &lsquo;<a
11901190
<td> For &lt;length&gt; the absolute value, otherwise a percentage
11911191
</table>
11921192

1193-
<p> The values of the &lsquo;<a href="#effects"><code class=css><code
1194-
class=property>transform</code></code></a>&rsquo; and &lsquo;<a
1195-
href="#transform-origin"><code class=css><code
1196-
class=property>transform-origin</code></code></a>&rsquo; properties are
1197-
used to compute the <a href="#TermTransformationMatrix"><i>transformation
1193+
<p> The values of the &lsquo;<a href="#effects"><code
1194+
class=property>transform</code></a>&rsquo; and &lsquo;<a
1195+
href="#transform-origin"><code
1196+
class=property>transform-origin</code></a>&rsquo; properties are used to
1197+
compute the <a href="#TermTransformationMatrix"><i>transformation
11981198
matrix</i></a>, as described above.
11991199

1200-
<p>If only one value is specified, the second value is assumed to be
1201-
&lsquo;<code class=property>center</code>&rsquo;. If one or two values are
1202-
specified, the third value is assumed to be &lsquo;<code
1203-
class=css>0px</code>&rsquo;.
1200+
<p> If only one value is specified, the second value is assumed to be
1201+
&lsquo;<code class=css><code class=css>center</code></code>&rsquo;. If one
1202+
or two values are specified, the third value is assumed to be &lsquo;<code
1203+
class=css><code class=css>0px</code></code>&rsquo;.
12041204

1205-
<p>If at least one of the first two values is not a keyword, then the first
1206-
value represents the horizontal position (or offset) and the second
1207-
represents the vertical position (or offset). The third value always
1208-
represents the Z position (or offset).
1205+
<p> If two or more values are defined and either no value is a keyword, or
1206+
the only used keyword is &lsquo;<code class=css><code
1207+
class=css>center</code></code>&rsquo;, then the first value represents the
1208+
horizontal position (or offset) and the second represents the vertical
1209+
position (or offset). A third value always represents the Z position (or
1210+
offset) and must be of type <var>&lt;length&gt;</var>.
12091211

12101212
<p><var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var> for the
12111213
first two values represent an offset of the transform origin from the top
@@ -1743,8 +1745,8 @@ <h3 id=svg-gradient-transform-pattern-transform><span class=secno>12.3.
17431745
attributes for the &lsquo;<a href="#effects"><code
17441746
class=property>transform</code></a>&rsquo; property.
17451747

1746-
<h3 id=svg-transform-functions><span class=secno>12.4. </span>SVG transform
1747-
functions</h3>
1748+
<h3 id=svg-transform-functions><span class=secno>12.4. </span> SVG
1749+
transform functions</h3>
17481750

17491751
<p> For backwards compatibility with existing SVG content, this
17501752
specification supports all transform functions defined by <a
@@ -1761,13 +1763,13 @@ <h3 id=svg-transform-functions><span class=secno>12.4. </span>SVG transform
17611763

17621764
<dd> specifies a <a href="#RotateDefined">2D rotation</a> by the angle
17631765
specified in the parameter about the origin of the element, as defined by
1764-
the &lsquo;<a href="#transform-origin"><code class=css><code
1765-
class=property>transform-origin</code></code></a>&rsquo; property. If the
1766+
the &lsquo;<a href="#transform-origin"><code
1767+
class=property>transform-origin</code></a>&rsquo; property. If the
17661768
optional translation values are specified, the transform origin is
17671769
translated by that amount (using the current transformation matrix) for
17681770
the duration of the rotate operation. For example &lsquo;<code
17691771
class=css><code class=css>rotate(90deg, 100px,
1770-
100px)</code></code>&rsquo; would elements cause to appear rotated
1772+
100px)</code></code>&rsquo; would cause elements to appear rotated
17711773
one-quarter of a turn in the clockwise direction after a translation of
17721774
100 pixel in the vertical and horizontal direction.
17731775
</dl>

‎css3-transforms/Transforms.src.html‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -885,20 +885,23 @@ <h2 id="transform-origin-property">
885885
</table>
886886

887887
<p>
888-
The values of the '<code class="property">transform</code>' and
889-
'<code class="property">transform-origin</code>' properties are used to compute the
890-
<a href="#TermTransformationMatrix"><i>transformation matrix</i></a>, as described above.
888+
The values of the 'transform' and 'transform-origin' properties are used to compute
889+
the <a href="#TermTransformationMatrix"><i>transformation matrix</i></a>, as
890+
described above.
891891
</p>
892892

893-
<p>If only one value is specified, the second value is assumed to be
894-
'center'. If one or two values are specified, the third value is
895-
assumed to be '0px'.
893+
<p>
894+
If only one value is specified, the second value is assumed to be '<code
895+
class="css">center</code>'. If one or two values are specified, the third value is
896+
assumed to be '<code class="css">0px</code>'.
896897
</p>
897898

898-
<p>If at least one of the first two values is not a keyword, then
899-
the first value represents the horizontal position (or offset)
900-
and the second represents the vertical position (or offset). The
901-
third value always represents the Z position (or offset).
899+
<p>
900+
If two or more values are defined and either no value is a keyword, or the only
901+
used keyword is '<code class="css">center</code>', then the first value
902+
represents the horizontal position (or offset) and the second represents the
903+
vertical position (or offset). A third value always represents the Z position (or
904+
offset) and must be of type <var>&lt;length&gt;</var>.
902905
</p>
903906

904907
<p><var>&lt;percentage&gt;</var> and <var>&lt;length&gt;</var>
@@ -1489,29 +1492,39 @@ <h3 id="svg-gradient-transform-pattern-transform">The SVG 'gradientTransform' an
14891492
the SVG '<code class="property">transform</code>' attribute. This specification does not introduce corresponding CSS style properties. Both, the 'gradientTransform' and the 'patternTransform' attribute, are presentation attributes for the 'transform' property.
14901493
</p>
14911494

1492-
<h3 id="svg-transform-functions">SVG transform functions</h3>
1495+
<h3 id="svg-transform-functions">
1496+
SVG transform functions
1497+
</h3>
14931498

14941499
<p>
1495-
For backwards compatibility with existing SVG content, this specification supports all transform functions
1496-
defined by <a href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The '<code class="property">transform</code>' attribute</a> in SVG 1.1.
1497-
Therefore the two-dimensional transform function '<code class="css">rotate(&lt;angle&gt;)</code>' is extended as follows:
1500+
For backwards compatibility with existing SVG content, this specification supports
1501+
all transform functions defined by <a
1502+
href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">The '<code
1503+
class="property">transform</code>' attribute</a> in SVG 1.1. Therefore the
1504+
two-dimensional transform function '<code class="css">rotate(&lt;angle&gt;)</code>'
1505+
is extended as follows:
14981506
</p>
14991507

15001508
<dl>
15011509
<dt>
1502-
<code class="css">rotate(&lt;angle&gt;[, &lt;translation-value&gt;, &lt;translation-value&gt;])</code>
1510+
<code class="css">rotate(&lt;angle&gt;[, &lt;translation-value&gt;,
1511+
&lt;translation-value&gt;])</code>
15031512
</dt>
15041513
<dd>
1505-
specifies a <a href="#RotateDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined
1506-
by the '<code class="property">transform-origin</code>' property. If the optional translation values are specified, the transform origin is translated by that amount
1507-
(using the current transformation matrix) for the duration of the rotate operation.
1508-
For example '<code class="css">rotate(90deg, 100px, 100px)</code>' would elements cause to appear rotated one-quarter of a turn in the clockwise direction after a translation
1509-
of 100 pixel in the vertical and horizontal direction.
1514+
specifies a <a href="#RotateDefined">2D rotation</a> by the angle specified in the
1515+
parameter about the origin of the element, as defined by the 'transform-origin'
1516+
property. If the optional translation values are specified, the transform origin
1517+
is translated by that amount (using the current transformation matrix) for the
1518+
duration of the rotate operation. For example '<code
1519+
class="css">rotate(90deg, 100px, 100px)</code>' would cause elements to appear
1520+
rotated one-quarter of a turn in the clockwise direction after a translation of
1521+
100 pixel in the vertical and horizontal direction.
15101522
</dd>
15111523
</dl>
15121524

15131525
<p>
1514-
User agents are just required to support the two optional arguments for translation on elements in the SVG namespace.
1526+
User agents are just required to support the two optional arguments for translation
1527+
on elements in the SVG namespace.
15151528
</p>
15161529

15171530
<h3 id="svg-three-dimensional-functions">SVG and 3D transform functions</h3>

0 commit comments

Comments
 (0)