1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
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>
|
