rotate3d()
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.
Sintaxis
La cantidad de rotación creada por rotate3d()
está especificada por tres <number>
s y un <angle>
. El <number>
s representa las coordenadas x, y y z del vector, denotando los ejes de la rotación. El <angle>
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.
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.
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
Compatibilidad con los navegadores
Por favor vea el tipo de datos <transform-function>
para información sobre compatibilidad.