[css-transforms] Clarify meaning of perspective: none

Author: dirkschulze

css-transforms/Overview.html

@@ -301,7 +301,7 @@ <h2 class="heading settled heading" data-level=6 id=transform-rendering><span cl
 
 <p><em>This section is normative.</em>
 
-<p>Specifying a value other than <span class=css data-link-type=maybe title=none>none</span> for the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> property establishes a new <a data-link-type=dfn href=#local-coordinate-system title="local coordinate system">local coordinate system</a> at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate system is given by the element’s <a data-link-type=dfn href=#transformation-matrix title="transformation matrix">transformation matrix</a>. Transformations are cumulative. That is, elements establish their local coordinate system within the coordinate system of their parent. From the perspective of the user, an element effectively accumulates all the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> properties of its ancestors as well as any local transform applied to it. The accumulation of these transforms defines a <a data-link-type=dfn href=#current-transformation-matrix-ctm title="current transformation matrix (ctm)">current transformation matrix (CTM)</a> for the element.
+<p>Specifying a value other than <a class=css data-link-type=maybe href=#none title=none>none</a> for the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> property establishes a new <a data-link-type=dfn href=#local-coordinate-system title="local coordinate system">local coordinate system</a> at the element that it is applied to. The mapping from where the element would have rendered into that local coordinate system is given by the element’s <a data-link-type=dfn href=#transformation-matrix title="transformation matrix">transformation matrix</a>. Transformations are cumulative. That is, elements establish their local coordinate system within the coordinate system of their parent. From the perspective of the user, an element effectively accumulates all the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> properties of its ancestors as well as any local transform applied to it. The accumulation of these transforms defines a <a data-link-type=dfn href=#current-transformation-matrix-ctm title="current transformation matrix (ctm)">current transformation matrix (CTM)</a> for the element.
 
 <p>The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards. Three-dimensional transform functions extend this coordinate space into three dimensions, adding a Z axis perpendicular to the plane of the screen, that increases towards the viewer.
 
@@ -375,7 +375,7 @@ <h2 class="heading settled heading" data-level=6 id=transform-rendering><span cl
 
 <p>For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow title=overflow>overflow</a> property is <span class=css data-link-type=maybe title=scroll>scroll</span> or <span class=css data-link-type=maybe title=auto>auto</span>, scrollbars will appear as needed to see content that is transformed outside the visible area.
 
-<p>For elements whose layout is governed by the CSS box model, any value other than <span class=css data-link-type=maybe title=none>none</span> for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
+<p>For elements whose layout is governed by the CSS box model, any value other than <a class=css data-link-type=maybe href=#none title=none>none</a> for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
 
 <p class=issue id=issue-ba073826><a class=self-link href=#issue-ba073826></a>
   Is this effect on <a class="css css-code" data-link-type=property href=http://dev.w3.org/csswg/css-position-3/#position title=position>position: fixed</a> necessary? If so, need to go into more detail here about why fixed positioned objects should do this, i.e., that it’s much harder to implement otherwise. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328">Bug 16328</a>.
@@ -746,7 +746,7 @@ <h2 class="heading settled heading" data-level=7 id=transform-property><span cla
 <p>A transformation is applied to the coordinate system an element renders in through the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> property. This property contains a list of <a href=#transform-functions>transform functions</a>. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix like defined in <a href=#mathematical-description>Mathematical Description of Transform Functions</a>, then multiplying the matrices.
 
 <table class=propdef><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-transform>transform<a class=self-link href=#propdef-transform></a></dfn><tr><th>Value:<td>none | <a class="production css-code" data-link-type=type href=#typedef-transform-list title="<transform-list>">&lt;transform-list&gt;</a><tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#transformable-element title="transformable elements">transformable elements</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified, but with relative lengths converted into absolute lengths.<tr><th>Percentages:<td>refer to the size of <a data-link-type=dfn href=#bounding-box title="bounding box">bounding box</a><tr><th>Animatable:<td>as <a href=#interpolation-of-transforms>transform</a></table>
-<p>Any computed value other than <span class=css data-link-type=maybe title=none>none</span> for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
+<p>Any computed value other than <a class=css data-link-type=maybe href=#none title=none>none</a> for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.
 
 <pre class=prod><dfn class=css-code data-dfn-type=type data-export="" id=typedef-transform-list>&lt;transform-list&gt;<a class=self-link href=#typedef-transform-list></a></dfn> = <a class="production css-code" data-link-type=type href=#typedef-transform-function title="<transform-function>">&lt;transform-function&gt;</a>+</pre>
 <!--
@@ -851,12 +851,12 @@ <h2 class="heading settled heading" data-level=9 id=transform-style-property><sp
 
 <p><ul>
   <li><a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow title=overflow>overflow</a>: any value other than <span class=css data-link-type=maybe title=visible>visible</span>.</li>
-  <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/filters/#effects title=filter>filter</a>: any value other than <span class=css data-link-type=maybe title=none>none</span>.</li>
+  <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/filters/#effects title=filter>filter</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
   <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#ClipProperty title=clip>clip</a>: any value other than <span class=css data-link-type=maybe title=auto>auto</span>.</li>
-  <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#clip-path title=clip-path>clip-path</a>: any value other than <span class=css data-link-type=maybe title=none>none</span>.</li>
+  <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#clip-path title=clip-path>clip-path</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
   <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/compositing-1/#propdef-isolation title=isolation>isolation</a>: used value of <span class=css data-link-type=maybe title=isolate>isolate</span>.</li>
-  <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#mask-image title=mask-image>mask-image</a>: any value other than <span class=css data-link-type=maybe title=none>none</span>.</li>
-  <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#mask-box-image-source title=mask-box-image-source>mask-box-image-source</a>: any value other than <span class=css data-link-type=maybe title=none>none</span>.</li>
+  <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#mask-image title=mask-image>mask-image</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
+  <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/masking/#mask-box-image-source title=mask-box-image-source>mask-box-image-source</a>: any value other than <a class=css data-link-type=maybe href=#none title=none>none</a>.</li>
   <li><a class=property data-link-type=propdesc href=http://dev.w3.org/fxtf/compositing-1/#propdef-mix-blend-mode title=mix-blend-mode>mix-blend-mode</a>: any value other than <span class=css data-link-type=maybe title=normal>normal</span>.</li>
 </ul>
 
@@ -887,9 +887,20 @@ <h2 class="heading settled heading" data-level=9 id=transform-style-property><sp
 <h2 class="heading settled heading" data-level=10 id=perspective-property><span class=secno>10 </span><span class=content>The <a class=property data-link-type=propdesc href=#propdef-perspective title=perspective>perspective</a> Property</span><a class=self-link href=#perspective-property></a></h2>
 
 <table class=propdef><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-perspective>perspective<a class=self-link href=#propdef-perspective></a></dfn><tr><th>Value:<td>none | <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><tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#transformable-element title="transformable elements">transformable elements</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>Absolute length or "none".<tr><th>Percentages:<td>N/A<tr><th>Animatable:<td>as <a href=http://dev.w3.org/csswg/css3-transitions/#animtype-length>length</a></table>
-<p>If the value is <span class=css data-link-type=maybe title=none>none</span>, no perspective transform is applied. Lengths must be positive.
+<p>Where <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> values must be positive.
 
-<p>The use of this property with any value other than <span class=css data-link-type=maybe title=none>none</span> establishes a stacking context. It also establishes a containing block (somewhat similar to <a class="css css-code" data-link-type=property href=http://dev.w3.org/csswg/css-position-3/#position title=position>position: relative</a>), just like the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> property does.
+<dl data-dfn-for=perspective>
+  <dt><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></dt>
+  <dd>
+    Distance to the center of projection. <span class=issue id=issue-1ded4de8><a class=self-link href=#issue-1ded4de8></a>Verify that projection is the distance to the center of projection.</span>
+  </dd>
+  <dt><dfn data-dfn-type=dfn data-noexport="" id=none>none<a class=self-link href=#none></a></dfn></dt>
+  <dd>
+    No perspective transform is applied. The effect is mathematically similar to an infinite <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> value. All objects appear to be flat on the canvas.
+  </dd>
+</dl>
+
+<p>The use of this property with any value other than <a class=css data-link-type=maybe href=#none title=none>none</a> establishes a stacking context. It also establishes a containing block (somewhat similar to <a class="css css-code" data-link-type=property href=http://dev.w3.org/csswg/css-position-3/#position title=position>position: relative</a>), just like the <a class=property data-link-type=propdesc href=#propdef-transform title=transform>transform</a> property does.
 
 <p>The values of the <a class=property data-link-type=propdesc href=#propdef-perspective title=perspective>perspective</a> and <a class=property data-link-type=propdesc href=#propdef-perspective-origin title=perspective-origin>perspective-origin</a> properties are used to compute the <a data-link-type=dfn href=#perspective-matrix title="perspective matrix">perspective matrix</a>, as described above.
 
@@ -1543,23 +1554,23 @@ <h2 class="heading settled heading" data-level=17 id=interpolation-of-transforms
 
 <p><ul>
   <li id=none-none-animation><a class=self-link href=#none-none-animation></a>
-    If both the <em>from-</em> and <em>to-transform</em> are <span class=css data-link-type=maybe title=none>none</span>:
+    If both the <em>from-</em> and <em>to-transform</em> are <a class=css data-link-type=maybe href=#none title=none>none</a>:
     <ul>
       <li>
-        There is no interpolation necessary. The computed value stays <span class=css data-link-type=maybe title=none>none</span>.
+        There is no interpolation necessary. The computed value stays <a class=css data-link-type=maybe href=#none title=none>none</a>.
       </li>
     </ul>
   </li>
   <li id=none-transform-animation><a class=self-link href=#none-transform-animation></a>
-    If one of the <em>from-</em> or <em>to-transforms</em> is <span class=css data-link-type=maybe title=none>none</span>.
+    If one of the <em>from-</em> or <em>to-transforms</em> is <a class=css data-link-type=maybe href=#none title=none>none</a>.
     <ul>
       <li>
-        The value <span class=css data-link-type=maybe title=none>none</span> is replaced by an equivalent <a data-link-type=dfn href=#identity-transform-function title="identity transform function">identity transform function</a> list for the corresponding transform function list. Both transform function lists get interpolated following the next rule.
+        The value <a class=css data-link-type=maybe href=#none title=none>none</a> is replaced by an equivalent <a data-link-type=dfn href=#identity-transform-function title="identity transform function">identity transform function</a> list for the corresponding transform function list. Both transform function lists get interpolated following the next rule.
       </li>
     </ul>
     <div class=example>
       <p>
-        For example, if <em>from-transform</em> is <span class=css data-link-type=maybe title=scale(2)>scale(2)</span> and <em>to-transform</em> is <span class=css data-link-type=maybe title=none>none</span> then the value <span class=css data-link-type=maybe title=scale(1)>scale(1)</span> will be used for <em>to-transform</em> and animation will proceed using the next rule. Similarly, if <em>from-transform</em> is <span class=css data-link-type=maybe title=none>none</span> and <em>to-transform</em> is <span class=css data-link-type=maybe title="scale(2) rotate(50deg)">scale(2) rotate(50deg)</span> then the animation will execute as if <em>from-transform</em> is <span class=css data-link-type=maybe title="scale(1) rotate(0)">scale(1) rotate(0)</span>.
+        For example, if <em>from-transform</em> is <span class=css data-link-type=maybe title=scale(2)>scale(2)</span> and <em>to-transform</em> is <a class=css data-link-type=maybe href=#none title=none>none</a> then the value <span class=css data-link-type=maybe title=scale(1)>scale(1)</span> will be used for <em>to-transform</em> and animation will proceed using the next rule. Similarly, if <em>from-transform</em> is <a class=css data-link-type=maybe href=#none title=none>none</a> and <em>to-transform</em> is <span class=css data-link-type=maybe title="scale(2) rotate(50deg)">scale(2) rotate(50deg)</span> then the animation will execute as if <em>from-transform</em> is <span class=css data-link-type=maybe title="scale(1) rotate(0)">scale(1) rotate(0)</span>.
       </p>
     </div>
   </li>
@@ -2324,6 +2335,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>local coordinate system, <a href=#local-coordinate-system title="section 4">4</a>
 <li>matrix(), <a href=#funcdef-matrix title="section 15.1">15.1</a>
 <li>matrix3d(), <a href=#funcdef-matrix3d title="section 15.2">15.2</a>
+<li>none, <a href=#none title="section 10">10</a>
 <li>perspective(), <a href=#funcdef-perspective title="section 15.2">15.2</a>
 <li>perspective matrix, <a href=#perspective-matrix title="section 4">4</a>
 <li>right (value), <a href=#valuedef-right0 title="section 8">8</a>
@@ -2397,7 +2409,8 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 
 <p class=issue>Keyword description missing. Description of flattening behavior is missing. Does rendering operate in <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> order? Do we still create a 3D context and let planes intersect? See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=22427">Bug 22427</a> <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=23015">Bug 23015</a>.<a href=#issue-0f144852> ↵ </a></p>
 
-<p class=issue>Backface-visibility cannot be tested by only looking at m33.  See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=23014">Bug 23014</a>.<a href=#issue-1b6023b0> ↵ </a></p>
+<span class=issue>Verify that projection is the distance to the center of projection.<a href=#issue-1ded4de8> ↵ </a></span>
+  <p class=issue>Backface-visibility cannot be tested by only looking at m33.  See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=23014">Bug 23014</a>.<a href=#issue-1b6023b0> ↵ </a></p>
 
 <p class=issue>Use different algorithm for interpolation of 2D matrices. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=17017">Bug 17017</a>.<a href=#issue-9abd49cc> ↵ </a></p>
 

css-transforms/Overview.src.html

@@ -874,7 +874,18 @@ <h2 id="perspective-property">The 'perspective' Property</h2>
 Animatable: as <a href="http://dev.w3.org/csswg/css3-transitions/#animtype-length">length</a>
 </pre>
 
-If the value is ''none'', no perspective transform is applied. Lengths must be positive.
+Where <<length>> values must be positive.
+
+<dl dfn-for="perspective">
+  <dt><<length>></dt>
+  <dd>
+    Distance to the center of projection. <span class="issue">Verify that projection is the distance to the center of projection.</span>
+  </dd>
+  <dt><dfn>none</dfn></dt>
+  <dd>
+    No perspective transform is applied. The effect is mathematically similar to an infinite <<length>> value. All objects appear to be flat on the canvas.
+  </dd>
+</dl>
 
 The use of this property with any value other than ''none'' establishes a stacking context. It also establishes a containing block (somewhat similar to ''position: relative''), just like the 'transform' property does.