Skip to content

Commit 3febf59

Browse files
committed
[css-transforms-2] Per WG resolution, clarify that perspective()/'perspective' takes values down to zero, and clamps to 1px to avoid infinity and problems near infinity. Fixes w3c#413, closes w3c#4279.
1 parent e90aa66 commit 3febf59

File tree

1 file changed

+15
-6
lines changed

1 file changed

+15
-6
lines changed

css-transforms-2/Overview.bs

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ Terminology {#terminology}
8282
:: A 4x4 matrix which does not fulfill the requirements of an [=2D matrix=].
8383

8484
: <dfn>identity transform function</dfn>
85-
:: In addition to the identity transform function in CSS Transforms, examples for identity transform functions include ''translate3d(0, 0, 0)'', ''translateZ(0)'', ''scaleZ(1)'', ''rotate3d(1, 1, 1, 0)'', ''rotateX(0)'', ''rotateY(0)'', ''rotateZ(0)'' and ''matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)''. A special case is perspective: ''perspective(infinity)''. The value of m<sub>34</sub> becomes infinitesimal small and the transform function is therefore assumed to be equal to the identity matrix.
85+
:: In addition to the identity transform function in CSS Transforms, examples for identity transform functions include ''translate3d(0, 0, 0)'', ''translateZ(0)'', ''scaleZ(1)'', ''rotate3d(1, 1, 1, 0)'', ''rotateX(0)'', ''rotateY(0)'', ''rotateZ(0)'' and ''matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)''. A special case is perspective: ''perspective(infinity)''. The value of m<sub>34</sub> becomes infinitesimal small and the transform function is therefore assumed to be equal to the identity matrix. 1111lllll
8686

8787
: <dfn>perspective matrix</dfn>
8888
:: A matrix computed from the values of the 'perspective' and 'perspective-origin' properties as described <a href="#perspective-matrix-computation">below</a>.
@@ -760,7 +760,7 @@ The 'perspective' Property {#perspective-property}
760760

761761
<pre class='propdef'>
762762
Name: perspective
763-
Value: none | <<length>>
763+
Value: none | <<length [0, ∞]>>
764764
Initial: none
765765
Applies to: <a>transformable elements</a>
766766
Inherited: no
@@ -769,14 +769,20 @@ Computed value: the keyword ''perspective/none'' or an absolute length
769769
Animation type: by computed value
770770
</pre>
771771

772-
Where <<length>> values must be positive.
773-
774772
<dl dfn-type=value dfn-for="perspective">
775773
: <dfn><<length>></dfn>
776774
:: Distance to the center of projection.
777775

778776
Issue: Verify that projection is the distance to the center of projection.
779777

778+
As very small <<length>> values can produce bizarre rendering results
779+
and stress the numerical accuracy of transform calculations,
780+
values less than ''1px'' must be treated as ''1px''
781+
for rendering purposes.
782+
(This clamping does not affect the underlying value,
783+
so ''perspective: 0;'' in a stylesheet
784+
will still serialize back as ''0''.)
785+
780786
: <dfn>none</dfn>
781787
:: No perspective transform is applied. The effect is mathematically similar to an infinite <<length>> value. All objects appear to be flat on the canvas.
782788

@@ -901,8 +907,11 @@ In the following <dfn export>3d transform functions</dfn>, a <<zero>> behaves th
901907
:: same as ''rotate3d(0, 1, 0, &lt;angle>)''.
902908
: <span class='prod'><dfn>rotateZ()</dfn> = rotateZ( [ <<angle>> | <<zero>> ] )</span>
903909
:: same as ''rotate3d(0, 0, 1, &lt;angle>)'', which is a 3d transform equivalent to the 2d transform ''rotate(&lt;angle>)''.
904-
: <span class='prod'><dfn>perspective()</dfn> = perspective( <<length>> )</span>
905-
:: specifies a <a href="#PerspectiveDefined">perspective projection matrix</a>. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. For example, a value of 1000px gives a moderate amount of foreshortening and a value of 200px gives an extreme amount. The value for depth must be greater than zero, otherwise the function is invalid.
910+
: <span class='prod'><dfn>perspective()</dfn> = perspective( <<length [0,∞]>> )</span>
911+
:: specifies a <a href="#PerspectiveDefined">perspective projection matrix</a>. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The parameter represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. For example, a value of 1000px gives a moderate amount of foreshortening and a value of 200px gives an extreme amount.
912+
913+
If the depth value is less than ''1px'',
914+
it must be treated as ''1px'' for the purpose of rendering.
906915

907916

908917
Transform function primitives and derivatives {#transform-primitives}

0 commit comments

Comments
 (0)