@@ -594,21 +594,20 @@ Initial: none
594
594
Applies to : <a>transformable elements</a>
595
595
Inherited : no
596
596
Percentages : relative to the width of the <a>reference box</a> (for the first value) or the height (for the second value)
597
- Computed Value : the keyword ''translate/none'' or a pair of computed <<length-percentage>> values and optionally an absolute length
598
- Animation type : by computed value, adding a third ''0'' value if needed to match components, but see below for ''translate/none''
597
+ Computed Value : the keyword ''translate/none'' or a pair of computed <<length-percentage>> values and an absolute length
598
+ Animation type : by computed value, but see below for ''translate/none''
599
599
</pre>
600
600
601
601
The 'translate' property accepts 1-3 values,
602
602
each specifying a translation against one axis,
603
603
in the order X, Y, then Z.
604
+ When the second or third values are missing,
605
+ they default to ''0px'' .
604
606
605
- If only one or two values are given ,
607
+ If the third value is omitted or zero ,
606
608
this specifies a 2d translation,
607
609
equivalent to the ''translate()'' function.
608
- If the second value is missing,
609
- it defaults to ''0px'' .
610
-
611
- If three values are given,
610
+ Otherwise,
612
611
this specifies a 3d translation,
613
612
equivalent to the ''translate3d()'' function.
614
613
@@ -623,60 +622,70 @@ Value: none | <<angle>> | [ x | y | z | <<number>>{3} ] && <<angle>>
623
622
Initial : none
624
623
Applies to : <a>transformable elements</a>
625
624
Inherited : no
626
- Computed value : the keyword ''rotate/none'', or an <<angle>> with an optional axis consisting of a list of three <<number>>s
625
+ Computed value : the keyword ''rotate/none'', or an <<angle>> with an axis consisting of a list of three <<number>>s
627
626
Animation type : as SLERP, but see below for ''rotate/none''
628
627
</pre>
629
628
630
629
The 'rotate' property accepts an angle to rotate an element,
631
630
and optionally an axis to rotate it around.
632
631
633
- If the axis is omitted, this specifies a 2d rotation,
634
- equivalent to the ''rotate()'' function.
635
-
636
- Otherwise, it specifies a 3d rotation:
637
- if <dfn value for=rotate>x</dfn> ,
632
+ The axis can be specified with either the
633
+ <dfn value for=rotate>x</dfn> ,
638
634
<dfn value for=rotate>y</dfn> ,
639
- or <dfn value for=rotate>z</dfn> is given,
640
- it specifies a rotation around that axis,
641
- equivalent to the ''rotateX()'' /etc 3d transform functions.
635
+ or <dfn value for=rotate>z</dfn> keywords,
636
+ which specify a rotation around that axis,
637
+ equivalent to the ''rotateX()'' , ''rotateY()'' ,
638
+ and ''rotateZ()'' transform functions.
642
639
Alternately, the axis can be specified explicitly
643
640
by giving three numbers
644
641
representing the x, y, and z components of an origin-centered vector,
645
642
equivalent to the ''rotate3d()'' function.
646
643
647
- Note: While ''rotate: 30deg;'' and ''rotate: z 30deg;'' technically specify the same rotation,
648
- the first declaration is a 2d transform equivalent to ''transform: rotate(30deg);'' ,
649
- while the second is a 3d transform equivalent to ''transform: rotateZ(30deg);'' ,
650
- which can have additional side-effects in UAs.
644
+ There is no difference in behavior between
645
+ a rotation specified as an <<angle>> alone
646
+ and a rotation specified as being around the z-axis
647
+ (whether by the ''z'' keyword or
648
+ by a vector whose first two components are zero
649
+ and third component is positive);
650
+ they are all 2d rotations equivalent to the ''rotate()'' function.
651
+ For example, ''rotate: 30deg'' , ''rotate: z 30deg'' , and
652
+ ''rotate: 0 0 1 30deg'' are equivalent.
651
653
652
654
<pre class="propdef">
653
655
Name : scale
654
656
Value : none | [ <<number>> | <<percentage>> ]{1,3}
655
657
Initial : none
656
658
Applies to : <a>transformable elements</a>
657
659
Inherited : no
658
- Computed value : the keyword ''scale/none'', or a list of 2 or 3 <<number>>s
660
+ Computed value : the keyword ''scale/none'', or a list of 3 <<number>>s
659
661
Animation type : by computed value, but see below for ''scale/none''
660
662
</pre>
661
663
662
664
The 'scale' property accepts 1-3 values,
663
665
each specifying a scale along one axis,
664
666
in order X, Y, then Z.
665
667
666
- If only the X value is given,
667
- the Y value defaults to the same value.
668
+ If the Y value is not given,
669
+ then it defaults to being the same as the X value.
668
670
669
- If one or two values are given,
671
+ If the Z value is not given,
672
+ then it defaults to ''1'' .
673
+
674
+ If the third value is omitted, ''1'' , or ''100%'' ,
670
675
this specifies a 2d scaling,
671
676
equivalent to the ''scale()'' function.
672
- If three values are given ,
677
+ Otherwise ,
673
678
this specifies a 3d scaling,
674
679
equivalent to the ''scale3d()'' function.
675
680
681
+ There is no difference in behavior between the third value being omitted
682
+ and the third value being ''1'' or ''100%'' .
683
+
676
684
A <<percentage>> is equivalent to a <<number>> ,
677
- for example ''scale: 100%; '' is equivalent to ''scale: 1; '' .
685
+ for example ''scale: 100%'' is equivalent to ''scale: 1'' .
678
686
Numbers are used during serialization of specified and computed values.
679
687
688
+
680
689
----
681
690
682
691
All three properties accept
@@ -697,54 +706,49 @@ value (''0px'' for translate, ''0deg'' for rotate, ''1'' for scale).
697
706
Serialization {#individual-transform-serialization}
698
707
---------------------------------------------------
699
708
700
- Because these properties have three distinct modes of behavior
701
- (no transform, 2d transform, or 3d transform),
709
+ Because these properties have two distinct modes of behavior
710
+ (no transform versus transform),
702
711
serialization must take this into account:
703
712
704
713
: for 'translate'
705
- :: If a 2d translation is specified,
706
- the property must serialize with only one or two values
707
- (per usual, if the second value is ''0px'' , the default,
708
- it must be omitted when serializing).
709
-
710
- If a 3d translation is specified,
711
- all three values must be serialized.
714
+ :: If a translation is specified,
715
+ the property must serialize with one through three values.
716
+ (As usual, if the second and third values are ''0px'' , the default,
717
+ or if only the third value is ''0px'' ,
718
+ then those ''0px'' values must be omitted when serializing).
712
719
713
720
It must serialize as the keyword ''translate/none''
714
721
if and only if ''translate/none'' was originally specified.
715
722
(An identity transform does not count;
716
- it must serialize as the 2d or 3d version,
717
- as appropriate.)
723
+ it must serialize as ''0px'' .)
718
724
719
725
: for 'rotate'
720
- :: If a 2d rotation is specified,
726
+ :: If a rotation about the z axis (that is, in 2D) is specified,
721
727
the property must serialize as just an <<angle>> .
722
728
723
- If a 3d rotation is specified,
729
+ If any other rotation is specified,
724
730
the property must serialize with an axis specified.
725
- If the axis is parallel with the x, y, or z axises ,
731
+ If the axis is parallel with the x or y axes ,
726
732
it must serialize as the appropriate keyword.
727
733
728
734
It must serialize as the keyword ''rotate/none''
729
735
if and only if ''rotate/none'' was originally specified.
730
736
(An identity transform does not count;
731
- it must serialize as the 2d or 3d version,
732
- as appropriate.)
737
+ it must serialize as ''0deg'' .)
733
738
734
739
: for 'scale'
735
- :: If a 2d scale is specified,
736
- the property must serialize with only one or two values
737
- (per usual, if the second value is the same as the first , the default,
738
- it must be omitted when serializing) .
739
-
740
- If a 3d scale is specified ,
741
- all three values must be serialized .
740
+ :: If a scale is specified,
741
+ the property must serialize with only one through three values.
742
+ As usual, if the third value is 1 , the default,
743
+ then it is omitted when serializing.
744
+ If the third value is omitted
745
+ and the second value is the same as the first (the default) ,
746
+ then the second value is also omitted when serializing .
742
747
743
748
It must serialize as the keyword ''scale/none''
744
749
if and only if ''scale/none'' was originally specified.
745
750
(An identity transform does not count;
746
- it must serialize as the 2d or 3d version,
747
- as appropriate.)
751
+ it must serialize as ''1'' .)
748
752
749
753
Current Transformation Matrix {#ctm}
750
754
====================================
0 commit comments