mozilla

Compare Revisions

transform

Change Revisions

Revision 291169:

Revision 291169 by teoli on

Revision 291170:

Revision 291170 by teoli on

Title:
transform
transform
Slug:
CSS/transform
CSS/transform
Tags:
CSS Transforms, CSS Reference, NeedsBrowserCompatibility, css, NeedsTechnicalReview, CSS:Mozilla Extensions
CSS Transforms, CSS Reference, NeedsBrowserCompatibility, css, CSS Référence, NeedsTechnicalReview, CSS:Mozilla Extensions
Content:

Revision 291169
Revision 291170
n11      {{ CompatTable() }}n11      {{ SeeCompatTable() }}
n48    <pre class="twopartsyntaxbox&gt; Formal grammar: &lt;transforn48    <p>
>m-function&gt; [&lt;transform-function&gt;]* | none&lt;/pre&gt; & 
>lt;pre&gt; transform: none transform: matrix(1.0, 2.0, 3.0, 4.0,  
>5.0, 6.0) transform: translate(12px, 50%) transform: translateX(2 
>em) transform: translateY(3in) transform: scale(2, 0.5) transform 
>: scaleX(2) transform: scaleY(0.5) transform: rotate(0.5turn) tra 
>nsform: skewX(30deg) transform: skewY(1.07rad) transform: matrix3 
>d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0,  
>13.0, 14.0, 15.0, 16.0) transform: translate3d(12px, 50%, 3em) tr 
>ansform: translateZ(2px) transform: scale3d(2.5, 1.2, 0.3) transf 
>orm: scaleZ(0.3) transform: rotate3d(1, 2.0, 3.0, 10deg) transfor 
>m: rotateX(10deg) transform: rotateY(10deg) transform: rotateZ(10 
>deg) transform: perspective(17px) transform: translateX(10px) rot 
>ate(10deg) translateY(5px) &lt;/pre&gt; &lt;h3 id="> 
49Values49      &nbsp;
50    </p>
51    <p>
52      &lt;pre class="twopartsyntaxbox&gt; Formal grammar: []* | n
 >one
53    </p>
54    <pre>
55 
56transform: none
57transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
58transform: translate(12px, 50%)
59transform: translateX(2em)
60transform: translateY(3in)
61transform: scale(2, 0.5)
62transform: scaleX(2)
63transform: scaleY(0.5)
64transform: rotate(0.5turn)
65transform: skewX(30deg)
66transform: skewY(1.07rad)
67transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 
 >10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
68transform: translate3d(12px, 50%, 3em)
69transform: translateZ(2px)
70transform: scale3d(2.5, 1.2, 0.3)
71transform: scaleZ(0.3)
72transform: rotate3d(1, 2.0, 3.0, 10deg)
73transform: rotateX(10deg)
74transform: rotateY(10deg)
75transform: rotateZ(10deg)
76transform: perspective(17px)
77 
78transform: translateX(10px) rotate(10deg) translateY(5px)
nn80    <h3 id=" values">
81      Values
82    </h3>
n65    <pre>n
66 
67</pre>
n71    <pre>n100    <p>
72 
73<br>See <a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Usin101      See <a href="/En/CSS/Using_CSS_transforms" title="En/CSS/Us
>g_CSS_transforms">Using CSS transforms</a>.>ing_CSS_transforms">Using CSS transforms</a>.
74</pre>102    </p>
n78    <pre>n
79 
80</pre>
n82 n
n97    <pre>n
98 
99</pre>
n103    <pre>n124    <p>
104 
105<br>The <code>transform</code> CSS property allows the coordinate125      The <code>transform</code> CSS property allows the coordina
> system used by an element to be manipulated using <strong>transf>te system used by an element to be manipulated using <strong>tran
>orm functions</strong>. These functions are described below.>sform functions</strong>. These functions are described below.
106</pre>126    </p>
n111 n
112</pre>
113    <pre>
114 
n124    <pre>n140    <p>
125 
126<br>Specifies a 2D transformation matrix comprised of the specifi141      Specifies a 2D transformation matrix comprised of the speci
>ed six values. This is the equivalent to applying the transformat>fied six values. This is the equivalent to applying the transform
>ion <strong>matrix [a b c d tx ty]</strong>.>ation <strong>matrix [a b c d tx ty]</strong>.
127</pre>142    </p>
n131    <pre>n
132 
133</pre>
n137    <pre>n
138 
139</pre>
n141 n
n148    <pre>n
149 
150</pre>
n152 n
n159</pre>n
160    <pre>
161 
n167    <pre>n
168 
169</pre>
n181    <pre>n
182 
183</pre>
n187    <pre>n
188 
189</pre>
n191 n
n194    <pre>n185    <p>
195 
196<br>Rotates the element clockwise around its origin (as specified186      Rotates the element clockwise around its origin (as specifi
> by the {{ Cssxref("transform-origin") }} property) by the specif>ed by the {{ Cssxref("transform-origin") }} property) by the spec
>ied <code>angle</code>. The operation corresponds to the matrix <>ified <code>angle</code>. The operation corresponds to the matrix
>strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</strong> <strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</stro
>>.>ng>.
197</pre>187    </p>
n201    <pre>n
202 
203</pre>
n205 n
n208    <pre>n194    <p>
209 
210<br>Specifies a 2D scaling operation described by <strong>[sx, sy195      Specifies a 2D scaling operation described by <strong>[sx, 
>]</strong>. If <code>sy</code> isn't specified, it is assumed to >sy]</strong>. If <code>sy</code> isn't specified, it is assumed t
>be equal to <code>sx</code>.>o be equal to <code>sx</code>.
211</pre>196    </p>
n215    <pre>n
216 
217</pre>
n219 n
n222    <pre>n203    <p>
223 
224<br>Specifies a scale operation using the vector <strong>[sx, 1]<204      Specifies a scale operation using the vector <strong>[sx, 1
>/strong>.>]</strong>.
225</pre>205    </p>
n229    <pre>n
230 
231</pre>
n233 n
n236    <pre>n212    <p>
237 
238<br>Specifies a scale operation using the vector <strong>[1, sy]<213      Specifies a scale operation using the vector <strong>[1, sy
>/strong>.>]</strong>.
239</pre>214    </p>
n243    <pre>n218    <p>
244 
245<br>{{ non-standard_inline() }}219      {{ non-standard_inline() }}
246</pre>220    </p>
n248 n
n251    <pre>n224    <p>
252 
253<br>Skews the element around the X and Y axes by the specified an225      Skews the element around the X and Y axes by the specified 
>gles. If <code>ay</code> isn't provided, no skew is performed on >angles. If <code>ay</code> isn't provided, no skew is performed o
>the Y axis.>n the Y axis.
254</pre>226    </p>
n258    <pre>n
259 
260</pre>
n264    <pre>n
265 
266</pre>
n268 n
n271    <pre>n236    <p>
272 
273<br>Skews the element around the X axis by the given <code>angle<237      Skews the element around the X axis by the given <code>angl
>/code>.>e</code>.
274</pre>238    </p>
n278    <pre>n
279 
280</pre>
n282 n
n285    <pre>n245    <p>
286 
287<br>Skews the element around the Y axis by the given <code>angle<246      Skews the element around the Y axis by the given <code>angl
>/code>.>e</code>.
288</pre>247    </p>
n292    <pre>n
293 
294</pre>
n296 n
n299    <pre>n254    <p>
300 
301<br>Specifies a 2D translation by the vector <strong>[tx, ty]</st255      Specifies a 2D translation by the vector <strong>[tx, ty]</
>rong>. If <code>ty</code> isn't specified, its value is assumed t>strong>. If <code>ty</code> isn't specified, its value is assumed
>o be zero.> to be zero.
302</pre>256    </p>
n306    <pre>n
307 
308</pre>
n310 n
n313    <pre>n263    <p>
314 
315<br>Translates the element by the given amount along the X axis.264      Translates the element by the given amount along the X axis
 >.
316</pre>265    </p>
n320    <pre>n
321 
322</pre>
n324 n
n327    <pre>n272    <p>
328 
329<br>Translates the element by the given amount along the Y axis.273      Translates the element by the given amount along the Y axis
 >.
330</pre>274    </p>
n334    <pre>n
335 
336</pre>
tt457    <p>
458      &nbsp;
459    </p>

Back to History