files/es/web/css/transform-function/rotate/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

---
title: rotate()
slug: Web/CSS/transform-function/rotate
tags:
  - CSS
  - NeedsCompatTable
  - Referencia
  - Transformaciones CSS
translation_of: Web/CSS/transform-function/rotate()
original_slug: Web/CSS/transform-function/rotate()
---
<div>{{CSSRef}}</div>

<p>La función <a href="/es/docs/">CSS</a> <code><strong>rotate()</strong></code>  define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.</p>

<p>El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el <strong>origen de transformación</strong>. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad {{ cssxref("transform-origin") }}.</p>

<p>La cantidad de rotación generada por la propiedad <code>rotate()</code> se define mediante un {{cssxref("&lt;angle&gt;")}}. 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.</p>

<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p>

<h2 id="Síntaxis">Síntaxis</h2>

<pre class="syntaxbox notranslate">rotate(<em>a</em>)
</pre>

<h2 id="Valores">Valores</h2>

<dl>
 <dt><em>a</em></dt>
 <dd>es un {{ cssxref("&lt;angle&gt;") }}  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.</dd>
</dl>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th>
   <th scope="col">Coordenadas homgéneas en  ℝℙ<sup>2</sup></th>
   <th scope="col">Coordinadas cartesianas en ℝ<sup>3</sup></th>
   <th scope="col">Coordenadas homgéneas en ℝℙ<sup>3</sup></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
   <td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
   <td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
  </tr>
  <tr>
   <td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;p&gt;foo&lt;/p&gt;
&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

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

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample("Examples","100%","200")}}</p>