rotate3d()

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La función rotate3d() 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.

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 transform-origin de CSS. Si el vector no está normalizado, 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.

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.

Sintaxis

rotate3d(x, y, z, a)

Valores

x
Es un <number> que describe la coordenada-x del vector y denota el eje de rotación.
y
Es un <number> que describe la coordenada-y del vector y denota el eje de rotación.
z
Es un <number> que describe la coordenada-z del vector y denota el eje de rotación.
a
Es un <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.
Coordenadas cartesianas en ℝ2 Coordenadas homogéneas en ℝℙ2 Coordenadas cartesianas en ℝ3 Coordenadas homogéneas en ℝℙ3
Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. 1+(1-cos(a))(x2-1)z·sen(a)+xy(1-cos(a))-y·sen(a)+xz·(1-cos(a))-z·sen(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sen(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001

Ejemplos

Rotar sobre el eje-X

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed{
  transform: rotate3d(1,0,0,60deg);
  background-color: blue;
}

Resultado

Rotar sobre un eje personalizado

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed{
  transform: rotate3d(1, 2, -1, 192deg);
  background-color: blue;
}

Resultado

Etiquetas y colaboradores del documento

 Colaboradores en esta página: jjyepez
 Última actualización por: jjyepez,