CSS | Função rotate()
A função rotate() é uma função embutida que é usada para girar um elemento com base no ângulo fornecido como um argumento. O ângulo pode ser definido em graus, grados, radianos ou voltas.
Sintaxe:
rotate( angle )
Parâmetros: Esta função aceita um ângulo de parâmetro único que representa o ângulo de rotação. Os ângulos positivo e negativo giram os elementos no sentido horário e anti-horário, respectivamente.
Os exemplos abaixo ilustram a função rotate() em CSS:
Exemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>CSS rotate() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.rotate_image {
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS rotate() function</h2>
<br><br>
<img class="rotate_image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo">
</body>
</html>
Saída:
Exemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>CSS rotate() function</title>
<style>
body {
text-align:center;
}
h1 {
color:green;
}
.GFG {
font-size:35px;
font-weight:bold;
color:green;
transform: rotate(30deg);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>CSS rotate() function</h2>
<br><br>
<div class="GFG">Welcome to GeeksforGeeks</div>
</body>
</html>
Saída:
Navegadores compatíveis: os navegadores compatíveis com a função rotate() estão listados abaixo:
- Google Chrome
- Internet Explorer
- Raposa de fogo
- Safári
- Ópera
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva