1.1 Propriedade transform
Transformações CSS permitem mudar a posição, tamanho, rotação e inclinação dos elementos sem alterar o fluxo normal do
documento. É uma ferramenta poderosa para criar interfaces web interativas e dinâmicas. Vamos conferir os fundamentos
das transformações usando as propriedades transform, translate, rotate, scale e skew.
A propriedade transform permite aplicar transformações 2D e 3D aos elementos. Ela combina várias
funções de transformação, como translate, rotate, scale e skew.
Sintaxe:
element {
transform: transformation-function;
}
Onde:
transformation-function: função de transformação aplicada ao elemento
Exemplo de uso:
.element {
transform: translate(50px, 100px);
}
1.2 Transformação translate
A transformação translate é usada para mover um elemento ao longo do eixo X e/ou Y.
Sintaxe:
element {
transform: translate(x, y);
}
Onde:
x: deslocamento ao longo do eixo X (pode ser negativo ou positivo)y: deslocamento ao longo do eixo Y (pode ser negativo ou positivo)
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformação translate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
.box: elemento com tamanho e cor fixos.box:hover: ao passar o cursor sobre o elemento, aplica-se a transformaçãotranslate(50px, 50px), movendo-o 50 pixels para a direita e para baixo
1.3 Transformação rotate
A transformação rotate é usada para girar um elemento em torno do seu centro.
Sintaxe:
element {
transform: rotate(angle);
}
Onde:
angle: ângulo de rotação em graus (pode ser negativo ou positivo)
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformação rotate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
.box: elemento com tamanho e cor fixos.box:hover: ao passar o cursor sobre o elemento, aplica-se a transformaçãorotate(45deg), girando-o 45 graus no sentido horário
1.4 Transformação scale
A transformação scale é usada para redimensionar um elemento ao longo do eixo X e/ou Y.
Sintaxe:
element {
transform: scale(sx, sy);
}
Onde:
sx: escala ao longo do eixo X (valor maior que 1 aumenta o elemento, menor que 1 diminui)sy: escala ao longo do eixo Y (valor maior que 1 aumenta o elemento, menor que 1 diminui)
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformação scale</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
.box: elemento com tamanho e cor fixos-
.box:hover: ao passar o cursor sobre o elemento, aplica-se a transformaçãoscale(1.5, 1.5), aumentando seu tamanho em 1.5 vezes em ambos os eixos
1.5 Transformação skew
A transformação skew é usada para inclinar um elemento ao longo do eixo X e/ou Y.
Sintaxe:
element {
transform: skew(ax, ay);
}
Onde:
ax: ângulo de inclinação ao longo do eixo X (pode ser negativo ou positivo)ay: ângulo de inclinação ao longo do eixo Y (pode ser negativo ou positivo)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformação skew</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
.box: elemento com tamanho e cor fixos..box:hover: ao passar o cursor sobre o elemento, aplica-se a transformaçãoskew(20deg, 10deg), inclinando-o 20 graus no eixo X e 10 graus no eixo Y.
1.6 Combinando diferentes transformações
A propriedade transform permite combinar várias funções de transformação para alcançar efeitos complexos.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transformações combinadas</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
.box: elemento com tamanho e cor fixos.box:hover: ao passar o cursor sobre o elemento, aplica-se simultaneamente as transformaçõestranslate,rotate,scaleeskew, criando um efeito complexo
GO TO FULL VERSION