8000 csswg-drafts/css-transforms-1/Overview.bs at c987ff23d268124342b6c82dafc8202d13aa8b38 · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
1475 lines (1147 loc) · 73.7 KB

Overview.bs

File metadata and controls

1475 lines (1147 loc) · 73.7 KB
The Transform Functions {#transform-functions}
==============================================
The value of the 'transform' property is a list of <dfn>&lt;transform-function></dfn>.
The set of allowed transform functions is given below.
In the following functions,
a <<zero>> behaves the same as ''0deg''
("unitless 0" angles are preserved for legacy compat).
A percentage for horizontal translations is relative to the width of the [=reference box=].
A percentage for vertical translations is relative to the height of the [=reference box=].
2D Transform Functions {#two-d-transform-functions}
----------------------
<dl dfn-for=transform>
: <span class='prod'><dfn>matrix()</dfn> = matrix( <<number>> [, <<number>> ]{5,5} )</span>
:: specifies a 2D transformation in the form of a <a href="#MatrixDefined">transformation matrix</a> of the six values a, b, c, d, e, f.
: <span class='prod'><dfn>translate()</dfn> = translate( <<length-percentage>> [, <<length-percentage>> ]? )</span>
:: specifies a <a href="#TranslateDefined">2D translation</a> by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <em>&lt;ty></em> is not provided, ty has zero as a value.
: <span class='prod'><dfn>translateX()</dfn> = translateX( <<length-percentage>> )</span>
:: specifies a <a href="#TranslateDefined">translation</a> by the given amount in the X direction.
: <span class='prod'><dfn>translateY()</dfn> = translateY( <<length-percentage>> )</span>
:: specifies a <a href="#TranslateDefined">translation</a> by the given amount in the Y direction.
: <span class='prod'><dfn>scale()</dfn> = scale( <<number>> [, <<number>> ]? )</span>
:: specifies a <a href="#ScaleDefined">2D scale</a> operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X and Y axes, or four times its typical geometric size.
: <span class='prod'><dfn>scaleX()</dfn> = scaleX( <<number>> )</span>
:: specifies a <a href="#ScaleDefined">2D scale</a> operation using the [sx,1] scaling vector, where sx is given as the parameter.
: <span class='prod'><dfn>scaleY()</dfn> = scaleY( <<number>> )</span>
:: specifies a <a href="#ScaleDefined">2D scale</a> operation using the [1,sy] scaling vector, where sy is given as the parameter.
: <span class='prod'><dfn>rotate()</dfn> = rotate( [ <<angle>> | <<zero>> ] )</span>
:: specifies a <a href="#RotateDefined">2D rotation</a> by the angle specified in the parameter about the origin of the element, as defined by the 'transform-origin' property. For example, ''rotate(90deg)'' would cause elements to appear rotated one-quarter of a turn in the clockwise direction.
: <span class='prod'><dfn>skew()</dfn> = skew( [ <<angle>> | <<zero>> ] [, [ <<angle>> | <<zero>> ] ]? )</span>
:: specifies a <a href="#SkewDefined">2D skew</a> by [ax,ay] for X and Y. If the second parameter is not provided, it has a zero value.
Advisement: ''skew()'' exists for compatibility reasons, and should not be used in new content. Use ''skewX()'' or ''skewY()'' instead, noting that the behavior of ''skew()'' is different from multiplying ''skewX()'' with ''skewY()''.
: <span class='prod'><dfn>skewX()</dfn> = skewX( [ <<angle>> | <<zero>> ] )</span>
:: specifies a <a href="#SkewXDefined">2D skew transformation along the X axis</a> by the given angle.
: <span class='prod'><dfn>skewY()</dfn> = skewY( [ <<angle>> | <<zero>> ] )</span>
:: specifies a <a href="#SkewYDefined">2D skew transformation along the Y axis</a> by the given angle.
</dl>
Transform function primitives and derivatives {#transform-primitives}
---------------------------------------------
Some transform functions can be represented by more generic transform functions. These transform functions are called derived transform functions, and the generic transform functions are called primitive transform functions. Two-dimensional primitives and their derived transform functions are:
<dl>
<dt id="translate-primitive">''translate()''
<dd>for <<translateX()>>, <<translateY()>> and <<translate()>>.
<dt id="scale-primitive">''scale()''
<dd>for <<scaleX()>>, <<scaleY()>> and <<scale()>>.
View remainder of file in raw view