diff options
Diffstat (limited to 'files/es/web/css/transform-function/rotate3d()/index.html')
| -rw-r--r-- | files/es/web/css/transform-function/rotate3d()/index.html | 121 |
1 files changed, 0 insertions, 121 deletions
diff --git a/files/es/web/css/transform-function/rotate3d()/index.html b/files/es/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index 86c5f44399..0000000000 --- a/files/es/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - CSS - - Funciones CSS - - Referencia -translation_of: Web/CSS/transform-function/rotate3d() ---- -<div>{{CSSRef}}</div> - -<p>La función <code>rotate3d()</code> de CSS define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. La cantidad de movimiento está definida por el ángulo especificado; si es positivo, el movimiento será en el sentido de las agujas del reloj, si es negativo, será contrario a las agujas del reloj.</p> - -<p>En el espacio tridimencional, las rotaciones tienen tres grados de libertad, que describen un ángulo de rotación. El ángulo de rotación está definido por un vector [x, y, z] y pasa por el origen (como lo define la propiedad {{ cssxref("transform-origin") }} de CSS. Si el vector no está <em>normalizado</em>, lo que significa que la suma del cuadrado de sus tres coordenadas no es igual a 1, el mismo será normalizado internamente. Un vector no-normalizable, como es el caso del vector nulo, [0, 0, 0], causará que la rotación no sea aplicada, sin que esto invalide la propiedad CSS en su totalidad.</p> - -<div class="note">Contrario a las rotaciones en el plano, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas es crucial.</div> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>La cantidad de rotación creada por <code>rotate3d()</code> está especificada por tres {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El <code><number></code>s representa las coordenadas x, y y z del vector, denotando los ejes de la rotación. El <code><angle></code> representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.</p> - -<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) -</pre> - -<h2 id="Valores">Valores</h2> - -<dl> - <dt><em>x</em></dt> - <dd>Es un {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación.</dd> - <dt><em>y</em></dt> - <dd>Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación.</dd> - <dt><em>z</em></dt> - <dd>Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación.</dd> - <dt><em>a</em></dt> - <dd>Es un {{ cssxref("<angle>") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.</dd> -</dl> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th> - <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th> - <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th> - <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th> - </tr> - </thead> - <tbody> - <tr> - <td colspan="2">Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.</td> - <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td> - <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td> - </tr> - </tbody> -</table> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Rotar_sobre_el_eje-X">Rotar sobre el eje-X</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><p>foo</p> -<p class="transformed">bar</p></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">p { - width: 50px; - height: 50px; - background-color: teal; -} - -.transformed{ - transform: rotate3d(1,0,0,60deg); - background-color: blue; -} -</pre> - -<h4 id="Resultado">Resultado</h4> - -<p>{{EmbedLiveSample("Rotating_on_the_X-axis","100%","200")}}</p> - -<h3 id="Rotar_sobre_un_eje_personalizado">Rotar sobre un eje personalizado</h3> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><p>foo</p> -<p class="transformed">bar</p></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">p { - width: 50px; - height: 50px; - background-color: teal; -} - -.transformed{ - transform: rotate3d(1, 2, -1, 192deg); - background-color: blue; -} -</pre> - -<h4 id="Resultado_2">Resultado</h4> - -<p>{{EmbedLiveSample("Rotating_on_a_custom_axis","100%","200")}}</p> - -<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> - -<p>Por favor vea el tipo de datos <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility"><transform-function></a></code> para información sobre compatibilidad.</p> - -<h2 id="Ver_también">Ver también</h2> - -<p> </p> - -<ul> - <li>{{cssxref("transform")}}</li> - <li>{{cssxref("<transform-function>")}}</li> -</ul> - -<p> </p> |