rotate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

La función CSS rotate() define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.

El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el origen de transformación. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad transform-origin.

La cantidad de rotación generada por la propiedad rotate() se define mediante un <angle>. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.

Síntaxis

rotate(a)

Valores

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

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

CSS

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

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

Resultado

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 20 mar 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content