Skip to content

Commit

Permalink
[css-transforms-2] Don't maintain state for whether individual transf…
Browse files Browse the repository at this point in the history
…orm property values are 2D or 3D. (#6147)

The group resolved in #3305 that individual transform properties do not
distinguish between values specified using 2D syntax and values
specified using 3D syntax that produce the same matrices.

Fixes the individual transforms part of #3305.
  • Loading branch information
dbaron committed Mar 31, 2021
1 parent 3679160 commit b79645c
Showing 1 changed file with 55 additions and 51 deletions.
106 changes: 55 additions & 51 deletions css-transforms-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -594,21 +594,20 @@ Initial: none
Applies to: <a>transformable elements</a>
Inherited: no
Percentages: relative to the width of the <a>reference box</a> (for the first value) or the height (for the second value)
Computed Value: the keyword ''translate/none'' or a pair of computed <<length-percentage>> values and optionally an absolute length
Animation type: by computed value, adding a third ''0'' value if needed to match components, but see below for ''translate/none''
Computed Value: the keyword ''translate/none'' or a pair of computed <<length-percentage>> values and an absolute length
Animation type: by computed value, but see below for ''translate/none''
</pre>

The 'translate' property accepts 1-3 values,
each specifying a translation against one axis,
in the order X, Y, then Z.
When the second or third values are missing,
they default to ''0px''.

If only one or two values are given,
If the third value is omitted or zero,
this specifies a 2d translation,
equivalent to the ''translate()'' function.
If the second value is missing,
it defaults to ''0px''.

If three values are given,
Otherwise,
this specifies a 3d translation,
equivalent to the ''translate3d()'' function.

Expand All @@ -623,60 +622,70 @@ Value: none | <<angle>> | [ x | y | z | <<number>>{3} ] && <<angle>>
Initial: none
Applies to: <a>transformable elements</a>
Inherited: no
Computed value: the keyword ''rotate/none'', or an <<angle>> with an optional axis consisting of a list of three <<number>>s
Computed value: the keyword ''rotate/none'', or an <<angle>> with an axis consisting of a list of three <<number>>s
Animation type: as SLERP, but see below for ''rotate/none''
</pre>

The 'rotate' property accepts an angle to rotate an element,
and optionally an axis to rotate it around.

If the axis is omitted, this specifies a 2d rotation,
equivalent to the ''rotate()'' function.

Otherwise, it specifies a 3d rotation:
if <dfn value for=rotate>x</dfn>,
The axis can be specified with either the
<dfn value for=rotate>x</dfn>,
<dfn value for=rotate>y</dfn>,
or <dfn value for=rotate>z</dfn> is given,
it specifies a rotation around that axis,
equivalent to the ''rotateX()''/etc 3d transform functions.
or <dfn value for=rotate>z</dfn> keywords,
which specify a rotation around that axis,
equivalent to the ''rotateX()'', ''rotateY()'',
and ''rotateZ()'' transform functions.
Alternately, the axis can be specified explicitly
by giving three numbers
representing the x, y, and z components of an origin-centered vector,
equivalent to the ''rotate3d()'' function.

Note: While ''rotate: 30deg;'' and ''rotate: z 30deg;'' technically specify the same rotation,
the first declaration is a 2d transform equivalent to ''transform: rotate(30deg);'',
while the second is a 3d transform equivalent to ''transform: rotateZ(30deg);'',
which can have additional side-effects in UAs.
There is no difference in behavior between
a rotation specified as an <<angle>> alone
and a rotation specified as being around the z-axis
(whether by the ''z'' keyword or
by a vector whose first two components are zero
and third component is positive);
they are all 2d rotations equivalent to the ''rotate()'' function.
For example, ''rotate: 30deg'', ''rotate: z 30deg'', and
''rotate: 0 0 1 30deg'' are equivalent.

<pre class="propdef">
Name: scale
Value: none | [ <<number>> | <<percentage>> ]{1,3}
Initial: none
Applies to: <a>transformable elements</a>
Inherited: no
Computed value: the keyword ''scale/none'', or a list of 2 or 3 <<number>>s
Computed value: the keyword ''scale/none'', or a list of 3 <<number>>s
Animation type: by computed value, but see below for ''scale/none''
</pre>

The 'scale' property accepts 1-3 values,
each specifying a scale along one axis,
in order X, Y, then Z.

If only the X value is given,
the Y value defaults to the same value.
If the Y value is not given,
then it defaults to being the same as the X value.

If one or two values are given,
If the Z value is not given,
then it defaults to ''1''.

If the third value is omitted, ''1'', or ''100%'',
this specifies a 2d scaling,
equivalent to the ''scale()'' function.
If three values are given,
Otherwise,
this specifies a 3d scaling,
equivalent to the ''scale3d()'' function.

There is no difference in behavior between the third value being omitted
and the third value being ''1'' or ''100%''.

A <<percentage>> is equivalent to a <<number>>,
for example ''scale: 100%;'' is equivalent to ''scale: 1;''.
for example ''scale: 100%'' is equivalent to ''scale: 1''.
Numbers are used during serialization of specified and computed values.


----

All three properties accept
Expand All @@ -697,54 +706,49 @@ value (''0px'' for translate, ''0deg'' for rotate, ''1'' for scale).
Serialization {#individual-transform-serialization}
---------------------------------------------------

Because these properties have three distinct modes of behavior
(no transform, 2d transform, or 3d transform),
Because these properties have two distinct modes of behavior
(no transform versus transform),
serialization must take this into account:

: for 'translate'
:: If a 2d translation is specified,
the property must serialize with only one or two values
(per usual, if the second value is ''0px'', the default,
it must be omitted when serializing).

If a 3d translation is specified,
all three values must be serialized.
:: If a translation is specified,
the property must serialize with one through three values.
(As usual, if the second and third values are ''0px'', the default,
or if only the third value is ''0px'',
then those ''0px'' values must be omitted when serializing).

It must serialize as the keyword ''translate/none''
if and only if ''translate/none'' was originally specified.
(An identity transform does not count;
it must serialize as the 2d or 3d version,
as appropriate.)
it must serialize as ''0px''.)

: for 'rotate'
:: If a 2d rotation is specified,
:: If a rotation about the z axis (that is, in 2D) is specified,
the property must serialize as just an <<angle>>.

If a 3d rotation is specified,
If any other rotation is specified,
the property must serialize with an axis specified.
If the axis is parallel with the x, y, or z axises,
If the axis is parallel with the x or y axes,
it must serialize as the appropriate keyword.

It must serialize as the keyword ''rotate/none''
if and only if ''rotate/none'' was originally specified.
(An identity transform does not count;
it must serialize as the 2d or 3d version,
as appropriate.)
it must serialize as ''0deg''.)

: for 'scale'
:: If a 2d scale is specified,
the property must serialize with only one or two values
(per usual, if the second value is the same as the first, the default,
it must be omitted when serializing).

If a 3d scale is specified,
all three values must be serialized.
:: If a scale is specified,
the property must serialize with only one through three values.
As usual, if the third value is 1, the default,
then it is omitted when serializing.
If the third value is omitted
and the second value is the same as the first (the default),
then the second value is also omitted when serializing.

It must serialize as the keyword ''scale/none''
if and only if ''scale/none'' was originally specified.
(An identity transform does not count;
it must serialize as the 2d or 3d version,
as appropriate.)
it must serialize as ''1''.)

Current Transformation Matrix {#ctm}
====================================
Expand Down

0 comments on commit b79645c

Please sign in to comment.