From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/transform-function/rotate()/index.html | 85 ++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 files/pt-br/web/css/transform-function/rotate()/index.html (limited to 'files/pt-br/web/css/transform-function/rotate()') diff --git a/files/pt-br/web/css/transform-function/rotate()/index.html b/files/pt-br/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..5f7b4270d0 --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate()/index.html @@ -0,0 +1,85 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +translation_of: Web/CSS/transform-function/rotate() +--- +

{{CSSRef}}

+ +

A função CSS rotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.

+ +

+ +

O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.

+ +

Sintaxe

+ +

A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).

+ +
rotate(a)
+
+ +

Valores

+ +
+
a
+
É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ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]
+ +

Exemplos

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples", "auto", 180)}}

+ +

Compatibilidade do navegador

+ +

Por favor, veja o tipo de dados <transform-function> para informações de compatibilidade.

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf