2.1 Propriedade transform-origin
A propriedade transform-origin no CSS define o ponto em relação ao qual as transformações, como rotate, scale, skew, e translate são aplicadas. Por padrão, esse ponto está no centro do elemento, mas você pode mudar a posição para obter os efeitos visuais desejados.
Noções básicas de transform-origin
Sintaxe da propriedade transform-origin:
element {
transform-origin: x-axis y-axis z-axis;
}
Onde:
x-axis: define a posição do ponto no eixo horizontaly-axis: define a posição do ponto no eixo verticalz-axis: define a posição do ponto no eixo Z (usado para transformações 3D)
Valores possíveis:
- Palavras-chave:
top,right,bottom,left,center - Valores percentuais: definem o ponto de origem em porcentagens do tamanho do elemento
- Valores absolutos: definem o ponto de origem em pixels ou outras unidades de medida
Exemplos de valores:
transform-origin: 50% 50%;— centro do elemento (valor padrão)transform-origin: 0 0;— canto superior esquerdo do elementotransform-origin: 100% 100%;— canto inferior direito do elementotransform-origin: 50px 100px;— deslocamento de 50 pixels à direita e 100 pixels para baixo a partir do canto superior esquerdo
Centralização do ponto de origem (padrão)
Neste exemplo, a transformação rotate ocorrerá em torno do centro do elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centralização do ponto de origem</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 Deslocamento do ponto
Deslocamento do ponto de origem para o canto superior esquerdo
Neste exemplo, o ponto de origem da transformação está deslocado para o canto superior esquerdo do elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ponto de origem no canto superior esquerdo</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Deslocamento do ponto de origem para o canto inferior direito
Neste exemplo, o ponto de origem da transformação está deslocado para o canto inferior direito do elemento.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ponto de origem no canto inferior direito</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 Definindo valores
Usando valores percentuais
Neste exemplo, o ponto de origem da transformação está em 25% na horizontal e 75% na vertical.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ponto de origem com valores percentuais</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Usando valores absolutos
Neste exemplo, o ponto de origem da transformação está deslocado 50 pixels na horizontal e 20 pixels na vertical.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ponto de origem com valores absolutos</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 Aplicação prática
Rotação de um elemento em torno de um ponto específico
Usar o transform-origin é útil para criar elementos rotativos que precisam girar em torno de um ponto específico. Por exemplo, criar um ponteiro de relógio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotação do ponteiro do relógio</title>
<style>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* Exemplo para posição de 1 hora */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
Criando um elemento escalável
Alterar o ponto de origem também é útil para escalar elementos em relação a diferentes pontos, o que pode ser útil para criar interfaces dinâmicas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elemento escalável</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION