rotate()

La función CSS rotate()  define una transformación para mover  un elemento alrededor de un punto fijo ( tal y como se especifica en la  propiedad transform-origin ) sin deformarlo. La cantidad de movimiento se define mediante un ángulo. Si es positivo, el movimiento serán en el sentido del reloj y, si es negativo, en sentido contrario al movimiento del reloj. Una rotación de 180° se llama punto de reflexión.

Síntaxis

rotate(a)

Valores

a
es un <angle>  que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.
Coordenadas cartesianas en ℝ2 Coordenadas homgéneas en  ℝℙ2 Coordinadas cartesianas en ℝ3 Coordenadas homgéneas en ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]

Ejemplos

HTML

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

CSS

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

.transformed{
  /* idéntico a rotateZ(45deg); */
  transform: rotate(45deg);
  background-color: blue;
}

Resultado

Etiquetas y colaboradores del documento

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