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) 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;
}