Skip to content

Commit 47dbcb9

Browse files
dirkschulzedirkschulze
committed
Simplify transform interpolation uppen request of CSS WG
1 parent 57262c7 commit 47dbcb9

3 files changed

Lines changed: 68 additions & 89 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-08-9 dschulze@adobe.com
2+
Simplify transform interpolation uppen request of CSS WG.
3+
rotate3d still gets decomposed as 4x4matrix for now.
4+
15
2012-07-27 dschulze@adobe.com
26
Markup clean up.
37

‎css3-transforms/Overview.html‎

Lines changed: 46 additions & 58 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 July 2012</h2>
42+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 August 2012</h2>
4343

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

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

5151
<dt>Latest version:
5252

@@ -2503,8 +2503,8 @@ <h3 id=three-d-transform-functions><span class=secno>15.2. </span>3D
25032503
by the first three parameters. If the direction vector is not of unit
25042504
length, it will be normalized. A direction vector that cannot be
25052505
normalized, such as [0,0,0], will cause the rotation to not be applied.
2506-
Note: The rotation is clockwise as one looks from the end of the vector
2507-
toward the origin.
2506+
<p class=note>Note that the rotation is clockwise as one looks from the
2507+
end of the vector toward the origin.</p>
25082508

25092509
<dt id=rotateX-function> <code class=css>rotateX(&lt;angle&gt;)</code>
25102510

@@ -2628,9 +2628,8 @@ <h2 id=animation><span class=secno>17. </span> Interpolation of Transforms</h2>
26282628

26292629
<li id=transform-transform-animation> If <em>from-</em> and
26302630
<em>to-transform</em> have the same number of transform functions, each
2631-
transform function is a derivative of a <a
2632-
href="#transform-primitives">primitive</a> and each function pair is a
2633-
derivative of the same primitive.
2631+
transform function pair has either the same name, or is a derivative of
2632+
the same <a href="#transform-primitives">primitive</a>.
26342633
<ul>
26352634
<li> Interpolate each transform function pair as described in <a
26362635
href="#interpolation-of-transform-functions">Interpolation of transform
@@ -2724,46 +2723,33 @@ <h2 id=transform-primitives><span class=secno>18. </span> Transform
27242723
class=css>scaleY(&lt;number&gt;)</code>, <code
27252724
class=css>scaleZ(&lt;number&gt;)</code> and <code
27262725
class=css>scale(&lt;number&gt;[, &lt;number&gt;])</code>.
2727-
</dl>
27282726

2729-
<p id=primitive-on-its-own> Every transform function is a derivative on its
2730-
own. E.g <code class=css>translate(&lt;translation-value&gt;,
2731-
&lt;translation-value&gt;)</code> of one transform list and <code
2732-
class=css>translate(&lt;translation-value&gt;,
2733-
&lt;translation-value&gt;)</code> of another transform list can be
2734-
interpolated with ‘<code class=css>translate</code>’ as primitive.
2735-
2736-
<p> The following transform functions are primitives without further
2737-
derivates: ‘<code class=css>skewX</code>’, ‘<code
2738-
class=css>skewY</code>’, ‘<code class=css>matrix</code>’, ‘<code
2739-
class=css>rotateX</code>’, ‘<code class=css>rotateY</code>’,
2740-
‘<code class=css>rotateZ</code>’, ‘<code
2741-
class=css>rotate3d</code>’, ‘<code class=css>matrix3d</code>’ and
2742-
‘<a href="#perspective"><code class=css>perspective</code></a>’.
2727+
<dt id=rotate3d-primitive> <code class=css>rotate3d(&lt;number&gt;,
2728+
&lt;number&gt;, &lt;number&gt;) </code>
2729+
2730+
<dd> for <code class=css>rotate(&lt;number&gt;)</code>, <code
2731+
class=css>rotateX(&lt;number&gt;)</code>, <code
2732+
class=css>rotateY(&lt;number&gt;)</code> and <code
2733+
class=css>rotateZ(&lt;number&gt;)</code>.
2734+
</dl>
27432735

27442736
<p id=interpolation-two-three-dimensional-function> For derived transform
27452737
functions that have a two-dimensional primitive and a three-dimensional
27462738
primitive, the context decides about the used primitive. See <a
27472739
href="#interpolation-of-transform-functions">Interpolation of primitives
2748-
and derived transform functions</a>.
2749-
2750-
<p id=none-derative-functions> Transform functions not listed above are
2751-
neither primitives nor derivatives and can neither be interpolated with
2752-
transform functions of primitives listed above nor with itself. UAs have
2753-
to follow the last rule on <a href="#animation">Interpolation of
2754-
Transforms</a> then.</p>
2740+
and derived transform functions</a>.</p>
27552741
<!-- ======================================================================================================= -->
27562742

27572743
<h2 id=interpolation-of-transform-functions><span class=secno>19. </span>
27582744
Interpolation of primitives and derived transform functions</h2>
27592745

2760-
<p> With the exception of ‘<code class=css>matrix</code>’, ‘<code
2761-
class=css>rotate3d</code>’, ‘<code class=css>matrix3d</code>’ and
2762-
‘<a href="#perspective"><code class=css>perspective</code></a>’, two
2763-
transform functions of the same type and the same number of arguments are
2764-
interpolated numerically without a former conversion. The calculated value
2765-
will be of the same transform function type with the same number of
2766-
arguments.
2746+
<p> Two transform functions with the same name and the same number of
2747+
arguments are interpolated numerically without a former conversion. The
2748+
calculated value will be of the same transform function type with the same
2749+
number of arguments. Special rules apply to ‘<code
2750+
class=css>rotate3d</code>’, ‘<code class=css>matrix</code>’,
2751+
‘<code class=css>matrix3d</code>’ and ‘<a href="#perspective"><code
2752+
class=css>perspective</code></a>’.
27672753

27682754
<div class=example>
27692755
<p> The two transform functions ‘<code class=css>translate(0)</code>’
@@ -2836,11 +2822,13 @@ <h2 id=interpolation-of-transform-functions><span class=secno>19. </span>
28362822
functions get interpolated numerically.</p>
28372823
</div>
28382824

2839-
<p> The transform functions ‘<code class=css>matrix</code>’, ‘<code
2840-
class=css>rotate3d</code>’, ‘<code class=css>matrix3d</code>’ and
2825+
<p> The transform functions ‘<code class=css>rotate3d</code>’, ‘<code
2826+
class=css>matrix</code>’, ‘<code class=css>matrix3d</code>’ and
28412827
‘<a href="#perspective"><code class=css>perspective</code></a>’ get
28422828
converted into 4x4 matrices first and interpolated as defined in section
2843-
<a href="">Interpolation of Matrices</a> afterwards.</p>
2829+
<a href="#matrix-interpolation">Interpolation of Matrices</a> afterwards.
2830+
2831+
<p> ‘<code class=css>rotate3d</code>’</p>
28442832
<!-- ======================================================================================================= -->
28452833

28462834
<h2 id=matrix-interpolation><span class=secno>20. </span> Interpolation of
@@ -3335,21 +3323,6 @@ <h2 class=no-num id=property-index>Property index</h2>
33353323

33363324
<td>visual
33373325

3338-
<tr>
3339-
<th><a class=property href="#perspective">perspective</a>
3340-
3341-
<td>none | &lt;length&gt;
3342-
3343-
<td>none
3344-
3345-
<td>transformable elements
3346-
3347-
<td>no
3348-
3349-
<td>N/A
3350-
3351-
<td>visual
3352-
33533326
<tr>
33543327
<th><a class=property href="#perspective-origin">perspective-origin</a>
33553328

@@ -3369,17 +3342,17 @@ <h2 class=no-num id=property-index>Property index</h2>
33693342
<td>visual
33703343

33713344
<tr>
3372-
<th><a class=property href="#effects">transform</a>
3345+
<th><a class=property href="#perspective">perspective</a>
33733346

3374-
<td>none | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*
3347+
<td>none | &lt;length&gt;
33753348

33763349
<td>none
33773350

33783351
<td>transformable elements
33793352

33803353
<td>no
33813354

3382-
<td>refer to the size of the element's bounding box
3355+
<td>N/A
33833356

33843357
<td>visual
33853358

@@ -3401,6 +3374,21 @@ <h2 class=no-num id=property-index>Property index</h2>
34013374

34023375
<td>visual
34033376

3377+
<tr>
3378+
<th><a class=property href="#effects">transform</a>
3379+
3380+
<td>none | &lt;transform-function&gt; [ &lt;transform-function&gt; ]*
3381+
3382+
<td>none
3383+
3384+
<td>transformable elements
3385+
3386+
<td>no
3387+
3388+
<td>refer to the size of the element's bounding box
3389+
3390+
<td>visual
3391+
34043392
<tr>
34053393
<th><a class=property href="#transform-style">transform-style</a>
34063394

‎css3-transforms/Transforms.src.html‎

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2334,8 +2334,8 @@ <h3 id="three-d-transform-functions">3D Transform Functions</h3>
23342334
direction vector is not of unit length, it will be
23352335
normalized. A direction vector that cannot be normalized,
23362336
such as [0,0,0], will cause the rotation to not be applied.
2337-
Note: The rotation is clockwise as one looks from the end of
2338-
the vector toward the origin.
2337+
<p class="note">Note that the rotation is clockwise as one looks from the end of
2338+
the vector toward the origin.</p>
23392339
</dd>
23402340
<dt id="rotateX-function">
23412341
<code class="css">rotateX(&lt;angle&gt;)</code>
@@ -2476,9 +2476,8 @@ <h2 id="animation">
24762476
</li>
24772477
<li id="transform-transform-animation">
24782478
If <em>from-</em> and <em>to-transform</em> have the same number of
2479-
transform functions, each transform function is a derivative of a <a
2480-
href="#transform-primitives">primitive</a> and each function pair
2481-
is a derivative of the same primitive.
2479+
transform functions, each transform function pair has either the same name, or is
2480+
a derivative of the same <a href="#transform-primitives">primitive</a>.
24822481
<ul>
24832482
<li>
24842483
Interpolate each transform function pair as described in <a
@@ -2588,35 +2587,23 @@ <h2 id="transform-primitives">
25882587
class="css">scaleZ(&lt;number&gt;)</code> and <code
25892588
class="css">scale(&lt;number&gt;[, &lt;number&gt;])</code>.
25902589
</dd>
2590+
<dt id="rotate3d-primitive">
2591+
<code class="css">rotate3d(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;)
2592+
</dt>
2593+
<dd>
2594+
for <code class="css">rotate(&lt;number&gt;)</code>, <code
2595+
class="css">rotateX(&lt;number&gt;)</code>, <code
2596+
class="css">rotateY(&lt;number&gt;)</code> and <code
2597+
class="css">rotateZ(&lt;number&gt;)</code>.
2598+
</dd>
25912599
</dl>
25922600

2593-
<p id="primitive-on-its-own">
2594-
Every transform function is a derivative on its own. E.g <code
2595-
class="css">translate(&lt;translation-value&gt;, &lt;translation-value&gt;)</code>
2596-
of one transform list and <code
2597-
class="css">translate(&lt;translation-value&gt;, &lt;translation-value&gt;)</code>
2598-
of another transform list can be interpolated with ''translate'' as primitive.
2599-
</p>
2600-
2601-
<p>
2602-
The following transform functions are primitives without further derivates:
2603-
''skewX'', ''skewY'', ''matrix'', ''rotateX'', ''rotateY'', ''rotateZ'',
2604-
''rotate3d'', ''matrix3d'' and ''perspective''.
2605-
</p>
2606-
26072601
<p id="interpolation-two-three-dimensional-function">
26082602
For derived transform functions that have a two-dimensional primitive and a
26092603
three-dimensional primitive, the context decides about the used primitive. See
26102604
<a href="#interpolation-of-transform-functions">Interpolation of primitives and
26112605
derived transform functions</a>.
26122606
</p>
2613-
2614-
<p id="none-derative-functions">
2615-
Transform functions not listed above are neither primitives nor derivatives and can
2616-
neither be interpolated with transform functions of primitives listed above nor
2617-
with itself. UAs have to follow the last rule on <a href="#animation">Interpolation
2618-
of Transforms</a> then.
2619-
</p>
26202607

26212608
<!-- ======================================================================================================= -->
26222609

@@ -2625,10 +2612,10 @@ <h2 id="interpolation-of-transform-functions">
26252612
</h2>
26262613

26272614
<p>
2628-
With the exception of ''matrix'', ''rotate3d'', ''matrix3d'' and ''perspective'',
2629-
two transform functions of the same type and the same number of arguments are
2615+
Two transform functions with the same name and the same number of arguments are
26302616
interpolated numerically without a former conversion. The calculated value will be
2631-
of the same transform function type with the same number of arguments.
2617+
of the same transform function type with the same number of arguments. Special rules
2618+
apply to ''rotate3d'', ''matrix'', ''matrix3d'' and ''perspective''.
26322619
</p>
26332620

26342621
<div class="example">
@@ -2708,9 +2695,9 @@ <h2 id="interpolation-of-transform-functions">
27082695
</div>
27092696

27102697
<p>
2711-
The transform functions ''matrix'', ''rotate3d'', ''matrix3d'' and ''perspective''
2698+
The transform functions ''rotate3d'', ''matrix'', ''matrix3d'' and ''perspective''
27122699
get converted into 4x4 matrices first and interpolated as defined in section <a
2713-
href="">Interpolation of Matrices</a> afterwards.
2700+
href="#matrix-interpolation">Interpolation of Matrices</a> afterwards.
27142701
</p>
27152702

27162703
<!-- ======================================================================================================= -->

0 commit comments

Comments
 (0)