Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Revision 107685 of Uso de CSS transforms

  • Enlace amigable (slug) de la revisión: CSS/Uso_de_CSS_transforms
  • Título de la revisión: Uso de CSS transforms
  • Id de la revisión: 107685
  • Creada:
  • Creador: another_sam
  • ¿Es la revisión actual? No
  • Comentario 1 words added, 1 words removed

Contenido de la revisión

{{ gecko_minversion_header("1.9.1") }}

Firefox 3.5 (Gecko 1.9.1) introdujo soporte para CSS transforms; éstos están implementados usando un conjunto de propiedades CSS que te permiten aplicar transformaciones lineales afines a elementos HTML. Estas transformaciones incluyen rotación, torsión, escalado, y traslación. Estas propiedades se basan en un diseño propuesto por el equipo de WebKit. Mientras tanto es un borrador de trabajo del W3C.

Mozilla soporta actualmente las propiedades {{ Cssxref("-moz-transform") }} y {{ Cssxref("-moz-transform-origin") }} properties.

 

Nota: En este momento, el eje Z no está soportado, por tanto la perspectiva, la rotación 3D, el escalado 3D y las transformaciones 3D no están soportadas.

Ejemplo: Rotación

Este ejemplo crea un iframe que te permite usar la página de inicio de Google, rotada 90 grados sobre su vértice inferior izquierdo.

Ver ejemplo real

Ver screenshot del ejemplo

<div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="500" height="600"></iframe>
</div>

Ejemplo: Torciendo y trasladando

Este ejemplo crea un iframe que te permite usar la página de inicio de Google, torcida 10 grados sobre el eje X.

Ver ejemplo real
Ver screenshot del ejemplo

<div style="-moz-transform: skewx(10deg) translatex(150px);
            -moz-transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
</div>

Ver también

  • {{ Cssxref("-moz-transform") }}, incluyendo funciones de transformación CSS
  • {{ Cssxref("-moz-transform-origin") }}

{{ languages( { "ja": "ja/CSS/Using_CSS_transforms",  "en": "en/CSS/Using_CSS_transforms"} ) }}

Fuente de la revisión

<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>Firefox 3.5 (Gecko 1.9.1) introdujo soporte para CSS transforms; éstos están implementados usando un conjunto de propiedades CSS que te permiten aplicar transformaciones lineales afines a elementos HTML. Estas transformaciones incluyen rotación, torsión, escalado, y traslación. Estas propiedades se basan en un <a class=" external" href="http://webkit.org/blog/130/css-transforms/" title="http://webkit.org/blog/130/css-transforms/">diseño propuesto por el equipo de WebKit</a>. Mientras tanto es un<a class=" external" href="http://www.w3.org/TR/css3-2d-transforms/" title="http://www.w3.org/TR/css3-2d-transforms/"> borrador de trabajo del W3C</a>.</p>
<p>Mozilla soporta actualmente las propiedades {{ Cssxref("-moz-transform") }} y {{ Cssxref("-moz-transform-origin") }} properties.</p>
<p> </p>
<div class="note"><strong>Nota:</strong> En este momento, el eje Z no está soportado, por tanto la perspectiva, la rotación 3D, el escalado 3D y las transformaciones 3D no están soportadas.<strong><br>
</strong></div>
<h2 id="Ejemplo: Rotación">Ejemplo: Rotación</h2>
<p>Este ejemplo crea un iframe que te permite usar la página de inicio de Google, rotada 90 grados sobre su vértice inferior izquierdo.</p>
<p><a class="internal" href="/../../../../@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Ver ejemplo real</a></p>
<p><a class="internal" href="/../../../../@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Ver screenshot del ejemplo</a></p>
<pre class="script">&lt;div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="500" height="600"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>
<h2 id="Ejemplo:_Torciendo_y_trasladando">Ejemplo: Torciendo y trasladando</h2>
<p>Este ejemplo crea un iframe que te permite usar la página de inicio de Google, torcida 10 grados sobre el eje X.</p>
<p><a class="external" href="/../../../../@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Ver ejemplo real</a><br>
<a class="internal" href="/../../../../@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">Ver screenshot del ejemplo</a></p>
<pre class="script">&lt;div style="-moz-transform: skewx(10deg) translatex(150px);
            -moz-transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="600" height="500"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>
<h2 id="Ver_también">Ver también</h2>
<ul> <li>{{ Cssxref("-moz-transform") }}, incluyendo funciones de transformación CSS</li> <li>{{ Cssxref("-moz-transform-origin") }}</li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/Using_CSS_transforms",  "en": "en/CSS/Using_CSS_transforms"} ) }}</p>
Revertir a esta revisión