mozilla

Compare Revisions

transform-function

Change Revisions

Revision 421699:

Revision 421699 by ethertank on

Revision 438593:

Revision 438593 by maybe on

Title:
transform-function
transform-function
Slug:
Web/CSS/transform-function
Web/CSS/transform-function
Content:

Revision 421699
Revision 438593
n23      <a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="n23      <a href="/@api/deki/files/5796/=coord_in_R2.png"><img src="
>/files/3438/coord_in_R2.png" width="171" style="float:right;" alt>/files/3438/coord_in_R2.png" style="float:right;" width="171" alt
>=""></a>>=""></a>
24    </p>
25    <p>24    </p>
25    <p>
26      In <a class="external" href="http://en.wikipedia.org/wiki/C26      In <a class="external" href="http://en.wikipedia.org/wiki/C
>artesian_coordinate_system">Cartesian coordinates</a> each point >artesian_coordinate_system">Cartesian coordinates</a> each point 
>of the <a class="external" href="http://en.wikipedia.org/wiki/Euc>of the <a class="external" href="http://en.wikipedia.org/wiki/Euc
>lidean_geometry">Euclidian space</a> is described using two value>lidean_geometry">Euclidian space</a> is described using two value
>s, the abscissa and the ordinate. The origin, the <code>(0, 0)</c>s, the abscissa and the ordinate. The origin, the <code>(0, 0)</c
>ode> is the top-left corner of the element. Unlike the usual geom>ode> is the top-left corner of the element. Unlike the usual geom
>etric convention, and like most case in computer graphics, the y->etric convention, and like most cases in computer graphics, the y
>axis goes to the bottom. Each point is mathematically described u>-axis goes to the bottom. Each point is mathematically described 
>sing the vector notation <code>(x,y)</code>.>using the vector notation <code>(x,y)</code>.
n40      <a href="/@api/deki/files/5799/=transform_functions_genericn40      <a href="/@api/deki/files/5799/=transform_functions_generic
>_transformation_cart.png"><img src="/@api/deki/files/5799/=transf>_transformation_cart.png"><img height="32" src="/@api/deki/files/
>orm_functions_generic_transformation_cart.png?size=webview" width>5799/=transform_functions_generic_transformation_cart.png?size=we
>="189" height="32" alt=""></a>.>bview" width="189" alt=""></a>.
n43      It is possible to apply several transformation in a raw:n43      It is possible to apply several transformations in a row:
n46      <a href="/@api/deki/files/5800/=transform_functions_transfon46      <a href="/@api/deki/files/5800/=transform_functions_transfo
>rm_composition_cart.png"><img src="/@api/deki/files/5800/=transfo>rm_composition_cart.png"><img height="32" src="/@api/deki/files/5
>rm_functions_transform_composition_cart.png?size=webview" width=">800/=transform_functions_transform_composition_cart.png?size=webv
>313" height="32" alt=""></a>.>iew" width="313" alt=""></a>.
n49      With this notation, it is possible to describe, and therefon49      With this notation, it is possible to describe, and therefo
>re composite, most usual transformations: rotations, scaling or s>re composite, most usual transformations: rotations, scaling or s
>kewing. In fact all transformations that are linear functions can>kewing. In fact all transformations that are linear functions can
> be describes. One major transformations is not linear and theref> be described. One major transformation is not linear and therefo
>ore must be special-cased when using this notation: translation. >re must be special-cased when using this notation: translation. T
>The translation vector (tx, ty) must be expressed separately, as >he translation vector (tx, ty) must be expressed separately, as t
>two more parameters.>wo more parameters.
n55      leading to 3x3 transformation matrices, though more complexn55      leading to 3x3 transformation matrices, though more complex
> and unusual for non-specialist, doesn't suffer from the translat> and unusual for non-specialist, doesn't suffer from the translat
>ion limitation as these can be expressed as linear functions in t>ion limitation as these can be expressed as linear functions in t
>his algebra, removing the need of special cases>his algebra, removing the need for special cases
n330            <a href="/@api/deki/files/5987/=transform-functions-rn330            <a href="/@api/deki/files/5987/=transform-functions-r
>otate3d_cart.png"><img src="/@api/deki/files/5987/=transform-func>otate3d_cart.png"><img height="47" src="/@api/deki/files/5987/=tr
>tions-rotate3d_cart.png?size=webview" width="510" height="47" alt>ansform-functions-rotate3d_cart.png?size=webview" width="510" alt
>=""></a> 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-c>=""></a> 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-c
>os(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos>os(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos
>(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)>(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)
>t0001>t0001
n333            <a href="/@api/deki/files/5986/=transform-functions-rn333            <a href="/@api/deki/files/5986/=transform-functions-r
>otate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-func>otate3d_hom4.png"><img height="61" src="/@api/deki/files/5986/=tr
>tions-rotate3d_hom4.png?size=webview" width="522" height="61" alt>ansform-functions-rotate3d_hom4.png?size=webview" width="522" alt
>=""></a>>=""></a>
n531      <img align="left" src="/@api/deki/files/5804/=transform-funn531      <img align="left" height="290" src="/@api/deki/files/5804/=
>ctions-scale_2_2.png?size=webview" width="350" height="290" alt=">transform-functions-scale_2_2.png?size=webview" width="350" alt="
>">>">
n684      <img align="left" src="/@api/deki/files/5807/=transform-funn684      <img align="left" height="296" src="/@api/deki/files/5807/=
>ctions-scaleX_2.png?size=webview" width="350" height="296" alt="">transform-functions-scaleX_2.png?size=webview" width="350" alt=""
>>The <code>scaleX()</code> CSS function modifies the abscissa of >>The <code>scaleX()</code> CSS function modifies the abscissa of 
>each element point by a constant factor, except if this scale fac>each element point by a constant factor, except if this scale fac
>tor is <code>1</code>, in which case the function is the identity>tor is <code>1</code>, in which case the function is the identity
> transform. The scaling is not isotropic and the angles of the el> transform. The scaling is not isotropic and the angles of the el
>ement are not conserved.>ement are not conserved.
tt1412    <p>
1413      &nbsp;
1414    </p>

Back to History