FFFF [css-transforms] Rebuild spec. · w3c/csswg-drafts@af27e69 · GitHub
Skip to content

Commit af27e69

Browse files
committed
[css-transforms] Rebuild spec.
1 parent 66734cf commit af27e69

1 file changed

Lines changed: 9 additions & 21 deletions

File tree

css-transforms/Overview.html

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
</p>
4646
<h1 class="p-name no-ref" id=title>CSS Transforms Module Level 1</h1>
4747
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
48-
<span class=dt-updated><span class=value-title title=20140523>23 May 2014</span></span></span></h2>
48+
<span class=dt-updated><span class=value-title title=20140526>26 May 2014</span></span></span></h2>
4949
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-transforms/>http://dev.w3.org/csswg/css-transforms/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css3-transforms/>http://www.w3.org/TR/css3-transforms/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-transforms/>http://dev.w3.org/csswg/css-transforms/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2012/WD-css3-transforms-20120911/ rel=previous>http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-transforms-20120403/ rel=previous>http://www.w3.org/TR/2012/WD-css3-transforms-20120403/</a>
5050
<dt>Feedback:</dt>
5151
<dd><a href="mailto:public-fx@w3.org?subject=%5Bcss-transforms%5D%20feedback">public-fx@w3.org</a>
@@ -128,7 +128,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
128128
<li><a href=#svg-functional-notation><span class=secno>13.2.2</span>Functional Notation</a>
129129
<li><a href=#svg-data-types><span class=secno>13.2.3</span>SVG Data Types</a>
130130
<ul class=toc>
131-
<li><a href=#svg-transform-value><span class=secno>13.2.3.1</span> The <span class=production data-link-type=type title="<translation-value>">&lt;translation-value&gt;</span> and <span class=production data-link-type=type title="<length>">&lt;length&gt;</span> type </a>
131+
<li><a href=#svg-transform-value><span class=secno>13.2.3.1</span> The <span class=production data-link-type=type title="<length>">&lt;length&gt;</span> type </a>
132132
<li><a href=#svg-angle><span class=secno>13.2.3.2</span>The <span class=production data-link-type=type title="<angle>">&lt;angle&gt;</span> type</a>
133133
<li><a href=#svg-number><span class=secno>13.2.3.3</span>The <span class=production data-link-type=type title="<number>">&lt;number&gt;</span> type</a></ul></ul>
134134
<li><a href=#svg-gradient-transform-pattern-transform><span class=secno>13.3</span> The SVG <span class=attr-name data-link-type=maybe>gradientTransform</span> and <span class=attr-name data-link-type=maybe>patternTransform</span> attributes </a>
@@ -1021,10 +1021,10 @@ <h4 class="heading settled heading" data-level=13.2.3 id=svg-data-types><span cl
10211021
<p>Arguments on all new introduced presentation attributes consist of data types in the sense of CSS Values and Units Module <a data-biblio-type=normative data-link-type=biblio href=#css3val title=css3val>[CSS3VAL]</a>. The definitions of data types in CSS Values and Units Module are enhanced as follows:</p>
10221022

10231023
<h5 class="heading settled heading" data-level=13.2.3.1 id=svg-transform-value><span class=secno>13.2.3.1 </span><span class=content>
1024-
The <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a> and <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> type
1024+
The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> type
10251025
</span><a class=self-link href=#svg-transform-value></a></h5>
10261026

1027-
<p>A <dfn class=css-code data-dfn-type=type data-export="" id=typedef-translation-value>&lt;translation-value&gt;<a class=self-link href=#typedef-translation-value></a></dfn> or <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> can be a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a> without an unit identifier. In this case the <a href=#svg-number><em>number</em></a> gets interpreted as "user unit". A user unit in the the <a href=http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem>initial coordinate system</a> is equivalent to the parent environment’s notion of a pixel unit.</p>
1027+
<p>A <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> can be a <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a> without an unit identifier. In this case the <a href=#svg-number><em>number</em></a> gets interpreted as "user unit". A user E36F unit in the the <a href=http://www.w3.org/TR/2003/REC-SVG11-20030114/coords.html#InitialCoordinateSystem>initial coordinate system</a> is equivalent to the parent environment’s notion of a pixel unit.</p>
10281028

10291029
<h5 class="heading settled heading" data-level=13.2.3.2 id=svg-angle><span class=secno>13.2.3.2 </span><span class=content>The <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#angle-value title="<angle>">&lt;angle&gt;</a> type</span><a class=self-link href=#svg-angle></a></h5>
10301030

@@ -1048,7 +1048,7 @@ <h3 class="heading settled heading" data-level=13.4 id=svg-transform-functions><
10481048

10491049
<dl>
10501050
<dt id=rotate-three-function><a class=self-link href=#rotate-three-function></a>
1051-
<pre class=prod><a data-link-type=functionish href=#funcdef-rotate title=rotate()>rotate()</a> = rotate( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#angle-value title="<angle>">&lt;angle&gt;</a> [, <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a>, <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a>]? )</pre>
1051+
<pre class=prod><a data-link-type=functionish href=#funcdef-rotate title=rotate()>rotate()</a> = rotate( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#angle-value title="<angle>">&lt;angle&gt;</a> [, <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a>, <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a>]? )</pre>
10521052
</dt>
10531053
<dd>
10541054
specifies a <a href=#RotateDefined>2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the <a class=property data-link-type=propdesc href=#propdef-transform-origin title=transform-origin>transform-origin</a> property. If the optional translation values are specified, the transform origin is translated by that amount (using the current transformation matrix) for the duration of the rotate operation. For example <span class=css data-link-type=maybe title="rotate(90deg, 100px, 100px)">rotate(90deg, 100px, 100px)</span> would cause elements to appear rotated one-quarter of a turn in the clockwise direction after a translation of the transform-origin of 100 pixel in the horizontal and vertical directions.
@@ -1134,8 +1134,6 @@ <h3 class="heading settled heading" data-level=14.1 id=svg-animate-element><span
11341134

11351135
<p>With this specification the SVG basic data type <a class="production css-code" data-link-type=type href=#typedef-transform-list title="<transform-list>">&lt;transform-list&gt;</a> is equivalent to a list of <a class="production css-code" data-link-type=type href=#typedef-transform-function title="<transform-function>">&lt;transform-function&gt;</a>s. <a class="production css-code" data-link-type=type href=#typedef-transform-list title="<transform-list>">&lt;transform-list&gt;</a> is animatable and additive. The data type can be animated using the SVG <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement><code class=element-name>&lt;animate&gt;</code></a> element and the SVG <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement><code class=element-name>&lt;set&gt;</code></a> element. SVG animations must run the same animation steps as described in section <a href=#interpolation-of-transforms>Transitions and Animations between Transform Values</a>.</p>
11361136

1137-
<p>The set of animatable data types gets extended by <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a>. The new data type is animatable and additive.</p>
1138-
11391137
<table class=data>
11401138
<caption>Animatable data types</caption>
11411139
<thead>
@@ -1160,15 +1158,6 @@ <h3 class="heading settled heading" data-level=14.1 id=svg-animate-element><span
11601158
<td>Additive for <a href=http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement><code class=element-name>&lt;animateTransform&gt;</code></a> means that a transformation is post-multiplied to the base set of
11611159
transformations.</td>
11621160
</tr>
1163-
<tr>
1164-
<th><a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a></th>
1165-
<td>yes</td>
1166-
<td>yes</td>
1167-
<td>yes</td>
1168-
<td>no</td>
1169-
<td>no</td>
1170-
<td> </td>
1171-
</tr>
11721161
</tbody>
11731162
</table>
11741163
@@ -1231,19 +1220,19 @@ <h3 class="heading settled heading" data-level=15.1 id=two-d-transform-functions
12311220
specifies a 2D transformation in the form of a <a href=#MatrixDefined>transformation matrix</a> of the six values a-f.
12321221
</dd>
12331222
<dt>
1234-
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-translate>translate()<a class=self-link href=#funcdef-translate></a></dfn> = translate( <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a> [, <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a> ]? )</pre>
1223+
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-translate>translate()<a class=self-link href=#funcdef-translate></a></dfn> = translate( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> [, <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> ]? )</pre>
12351224
</dt>
12361225
<dd>
12371226
specifies a <a href=#TranslateDefined>2D translation</a> by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <em>&lt;ty&gt;</em> is not provided, ty has zero as a value.
12381227
</dd>
12391228
<dt>
1240-
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-translatex title=translatex()>translateX()<a class=self-link href=#funcdef-translatex></a></dfn> = translateX( <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a> )</pre>
1229+
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-translatex title=translatex()>translateX()<a class=self-link href=#funcdef-translatex></a></dfn> = translateX( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> )</pre>
12411230
</dt>
12421231
<dd>
12431232
specifies a <a href=#TranslateDefined>translation</a> by the given amount in the X direction.
12441233
</dd>
12451234
<dt>
1246-
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-translatey title=translatey()>translateY()<a class=self-link href=#funcdef-translatey></a></dfn> = translateY( <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a> )</pre>
1235+
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-translatey title=translatey()>translateY()<a class=self-link href=#funcdef-translatey></a></dfn> = translateY( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> )</pre>
12471236
</dt>
12481237
<dd>
12491238
specifies a <a href=#TranslateDefined>translation</a> by the given amount in the Y direction.
@@ -1306,7 +1295,7 @@ <h3 class="heading settled heading" data-level=15.2 id=three-d-transform-functio
13061295
specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.
13071296
</dd>
13081297
<dt>
1309-
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-translate3d>translate3d()<a class=self-link href=#funcdef-translate3d></a></dfn> = translate3d( <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a> , <a class="production css-code" data-link-type=type href=#typedef-translation-value title="<translation-value>">&lt;translation-value&gt;</a> , <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> )</pre>
1298+
<pre class=prod><dfn class=css-code data-dfn-type=function data-export="" id=funcdef-translate3d>translate3d()<a class=self-link href=#funcdef-translate3d></a></dfn> = translate3d( <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> , <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> , <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> )</pre>
13101299
</dt>
13111300
<dd>
13121301
specifies a <a href=#Translate3dDefined>3D translation</a> by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.
@@ -2307,7 +2296,6 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
23072296
<li>translatex(), <a href=#funcdef-translatex title="section 15.1">15.1</a>
23082297
<li>translatey(), <a href=#funcdef-translatey title="section 15.1">15.1</a>
23092298
<li>translatez(), <a href=#funcdef-translatez title="section 15.2">15.2</a>
2310-
<li>&lt;translation-value&gt;, <a href=#typedef-translation-value title="section 13.2.3.1">13.2.3.1</a>
23112299
<li>user coordinate system, <a href=#user-coordinate-system title="section 4">4</a>
23122300
</ul></div>
23132301

0 commit comments

Comments
 (0)