From 8971f6d4dbf576e6ba5faf919faf7ad800678a29 Mon Sep 17 00:00:00 2001 From: Joe Pea Date: Fri, 27 Dec 2024 13:53:13 -0800 Subject: [PATCH] Improve links to 2D vs 3D transforms math descriptions. --- geometry/Overview.bs | 73 +++++++++++++++++++++++--------------------- 1 file changed, 39 insertions(+), 34 deletions(-) diff --git a/geometry/Overview.bs b/geometry/Overview.bs index 50e973a..3eb61d0 100644 --- a/geometry/Overview.bs +++ b/geometry/Overview.bs @@ -61,7 +61,7 @@ rectangles, quadrilaterals and transformation matrices with the dimension of 3x2 The SVG interfaces {{SVGPoint}}, {{SVGRect}} and {{SVGMatrix}} are aliasing the here defined interfaces in favor for common interfaces used by SVG, Canvas 2D Context and CSS -Transforms. [[SVG11]] [[HTML]] [[CSS3-TRANSFORMS]] +Transforms. [[SVG11]] [[HTML]] [[CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] The DOMPoint interfaces {#DOMPoint} @@ -890,13 +890,13 @@ means to run the following steps. It will either return a 4x4 abstract matrix for the CSS 'transform' property. The result will be a <>, the keyword ''transform/none'', or failure. If parsedValue is failure, or any <> has <> values without absolute length units, or any keyword other - than ''transform/none'' is used, then return failure. [[!CSS3-SYNTAX]] [[!CSS3-TRANSFORMS]] + than ''transform/none'' is used, then return failure. [[!CSS3-SYNTAX]] [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 3. If parsedValue is ''transform/none'', set parsedValue to a <> containing a single identity matrix. -4. Let 2dTransform track the 2D/3D dimension status of parsedValue. +4. Let 2dTransform track whether parsedValue is a 2D or 3D transform.
: If parsedValue consists of any three-dimensional + href="https://drafts.csswg.org/css-transforms-2/#transform-primitives">three-dimensional transform functions :: Set 2dTransform to false. @@ -905,9 +905,8 @@ means to run the following steps. It will either return a 4x4 abstract matrix Set 2dTransform to true.
5. Transform all <>s to 4x4 abstract - matrices by following the “Mathematical Description - of Transform Functions”. [[!CSS3-TRANSFORMS]] + matrices by following the “Mathematical Description + of Transform Functions”. [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 6. Let matrix be a 4x4 abstract matrix as shown in the initial figure of this section. Post-multiply all matrices from left to right and set matrix to this product. @@ -1371,7 +1370,7 @@ The following methods do not modify the current matrix. 13. Append ")" to string. Note: The string will be in the form of a a CSS Transforms <> function. - [[CSS3-TRANSFORMS]] + [[CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 4. Otherwise: 1. Append "matrix3d(" to string. 2. Append [=!=] [=ToString=](m11 element) to string. @@ -1400,7 +1399,7 @@ The following methods do not modify the current matrix. 25. Append ")" to string. Note: The string will be in the form of a a CSS Transforms <> function. - [[CSS3-TRANSFORMS]] + [[CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 5. Return string. @@ -1486,10 +1485,10 @@ user agents. 4. Return the current matrix. : translateSelf(tx, ty, tz) :: - 1. Post-multiply a translation transformation on the current matrix. The 3D - translation matrix is described in CSS - Transforms. [[!CSS3-TRANSFORMS]] + 1. Post-multiply a translation transformation on the current matrix. The 2D translation matrix is + described, and the 3D + translation matrix is described, + in CSS Transforms. [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 2. If tz is specified and not ''0'' or ''-0'', set is 2D of the current matrix to false. 3. Return the current matrix. @@ -1500,10 +1499,11 @@ user agents. 1. Perform a {{DOMMatrix/translateSelf()}} transformation on the current matrix with the arguments originX, originY, originZ. 2. If scaleY is missing, set scaleY to the value of scaleX. - 3. Post-multiply a non-uniform scale transformation on the current matrix. The 3D - scale matrix is described + 3. Post-multiply a non-uniform scale transformation on the current matrix. The 2D scale matrix is + described, and the 3D + scale matrix is described, in CSS Transforms with sx = scaleX, sy = scaleY and - sz = scaleZ. [[!CSS3-TRANSFORMS]] + sz = scaleZ. [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 4. Negate originX, originY and originZ. 5. Perform a {{DOMMatrix/translateSelf()}} transformation on the current matrix with the arguments originX, originY, originZ. @@ -1518,9 +1518,10 @@ user agents. arguments originX, originY, originZ. 2. Post-multiply a uniform 3D scale transformation ({{DOMMatrixReadOnly/m11}} = {{DOMMatrixReadOnly/m22}} = {{DOMMatrixReadOnly/m33}} = scale) on the current matrix. - The 3D scale matrix is described in CSS Transforms - with sx = sy = sz = scale. [[!CSS3-TRANSFORMS]] + The 2D scale matrix is + described, and the 3D + scale matrix is described, in CSS Transforms + with sx = sy = sz = scale. [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 3. Apply a {{DOMMatrix/translateSelf()}} transformation to the current matrix with the arguments -originX, -originY, -originZ. 4. If scale is not ''1'', set is 2D of the current matrix to @@ -1535,25 +1536,28 @@ user agents. 4. If rotX or rotY are not ''0'' or ''-0'', set is 2D of the current matrix to false. 5. Post-multiply a rotation transformation on the current matrix around the vector 0, - 0, 1 by the specified rotation rotZ in degrees. The 3D rotation matrix is described in CSS Transforms - with alpha = rotZ in degrees. [[!CSS3-TRANSFORMS]] + 0, 1 by the specified rotation rotZ in degrees. The 2D rotation matrix is described, and the 3D rotation matrix is described, in CSS Transforms + with alpha = rotZ in degrees. [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 6. Post-multiply a rotation transformation on the current matrix around the vector 0, - 1, 0 by the specified rotation rotY in degrees. The 3D rotation matrix is described in CSS Transforms - with alpha = rotY in degrees. [[!CSS3-TRANSFORMS]] + 1, 0 by the specified rotation rotY in degrees. The 2D rotation matrix is described, and the 3D rotation matrix is described, in CSS Transforms + with alpha = rotY in degrees. [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 7. Post-multiply a rotation transformation on the current matrix around the vector 1, - 0, 0 by the specified rotation rotX in degrees. The 3D rotation matrix is described in CSS Transforms - with alpha = rotX in degrees. [[!CSS3-TRANSFORMS]] + 0, 0 by the specified rotation rotX in degrees. The 2D rotation matrix is described, and the 3D rotation matrix is described, in CSS Transforms + with alpha = rotX in degrees. [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 8. Return the current matrix. : rotateFromVectorSelf(x, y) :: - 1. Post-multiply a rotation transformation on the current matrix. The rotation angle + 1. Post-multiply a 2D rotation transformation on the current matrix. The rotation angle is determined by the angle between the vector (1,0)T and (x,y)T in the clockwise direction. If x and - y should both be ''0'' or ''-0'', the angle is specified as ''0''. The 2D rotation - matrix is described in CSS + y should both be ''0'' or ''-0'', the angle is specified as ''0''. The 2D rotation matrix is described in CSS Transforms where alpha is the angle between the vector (1,0)T and (x,y)T in degrees. [[!CSS3-TRANSFORMS]] 2. Return the current matrix. @@ -1561,9 +1565,10 @@ user agents. :: 1. Post-multiply a rotation transformation on the current matrix around the specified vector x, y, z by the specified rotation angle in - degrees. The 3D rotation matrix is described in CSS Transforms - with alpha = angle in degrees. [[!CSS3-TRANSFORMS]] + degrees. The 2D rotation matrix is described, and the 3D rotation matrix is described, in CSS Transforms + with alpha = angle in degrees. [[!CSS3-TRANSFORMS]] [[!CSS3-TRANSFORMS-2]] 2. If x or y are not ''0'' or ''-0'', set is 2D of the current matrix to false. 3. Return the current matrix.