From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../web/css/transform-function/rotate()/index.html | 79 ++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 files/es/web/css/transform-function/rotate()/index.html (limited to 'files/es/web/css/transform-function/rotate()') diff --git a/files/es/web/css/transform-function/rotate()/index.html b/files/es/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..65c97a27fc --- /dev/null +++ b/files/es/web/css/transform-function/rotate()/index.html @@ -0,0 +1,79 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +tags: + - CSS + - NeedsCompatTable + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/rotate() +--- +
{{CSSRef}}
+ +

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 {{ cssxref("transform-origin") }}.

+ +

La cantidad de rotación generada por la propiedad rotate() se define mediante un {{cssxref("<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

+ +
+
a
+
es un {{ cssxref("<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 ℝ2Coordenadas homgéneas en  ℝℙ2Coordinadas cartesianas en ℝ3Coordenadas 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

+ +

{{EmbedLiveSample("Examples","100%","200")}}

-- cgit v1.2.3-54-g00ecf