Rotacionando Elementos em 2D e 3D
Podemos utilizar a função rotate() para rotacionar elementos. Valores positivos rotacionam o elemento no sentido horário, enquanto valores negativos rotacionam no sentido anti-horário. O ângulo de rotação é normalmente especificado em graus (deg), sendo o valor padrão 0deg, indicando nenhuma rotação. Outras unidades aceitáveis para ângulos de rotação são voltas (turn) e radianos (rad).
Eixos do Elemento
Para compreender como a rotação funciona, é necessário entender o conceito de eixos do elemento. Existem três eixos:
- O eixo x é horizontal, indo da esquerda para a direita;
- O eixo y é vertical, indo de cima para baixo;
- O eixo z é perpendicular à tela, apontando para o observador.
Direção da Rotação
Por padrão, a propriedade rotate() rotaciona o elemento ao redor do eixo z. No entanto, também é possível aplicar rotação ao redor dos eixos x e y utilizando os seguintes valores:
transform: rotateX(angle);
transform: rotateY(angle);
Exemplo 1
Considere o código de exemplo a seguir, onde diferentes ângulos de rotação são aplicados para demonstrar a rotação ao redor do eixo z:
index.html
index.css
Exemplo 2
Neste exemplo, exploramos a rotação em torno dos eixos z, x e y:
index.html
index.css
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.04Rotacionando Elementos em 2D e 3D
Deslize para mostrar o menu
Podemos utilizar a função rotate() para rotacionar elementos. Valores positivos rotacionam o elemento no sentido horário, enquanto valores negativos rotacionam no sentido anti-horário. O ângulo de rotação é normalmente especificado em graus (deg), sendo o valor padrão 0deg, indicando nenhuma rotação. Outras unidades aceitáveis para ângulos de rotação são voltas (turn) e radianos (rad).
Eixos do Elemento
Para compreender como a rotação funciona, é necessário entender o conceito de eixos do elemento. Existem três eixos:
- O eixo x é horizontal, indo da esquerda para a direita;
- O eixo y é vertical, indo de cima para baixo;
- O eixo z é perpendicular à tela, apontando para o observador.
Direção da Rotação
Por padrão, a propriedade rotate() rotaciona o elemento ao redor do eixo z. No entanto, também é possível aplicar rotação ao redor dos eixos x e y utilizando os seguintes valores:
transform: rotateX(angle);
transform: rotateY(angle);
Exemplo 1
Considere o código de exemplo a seguir, onde diferentes ângulos de rotação são aplicados para demonstrar a rotação ao redor do eixo z:
index.html
index.css
Exemplo 2
Neste exemplo, exploramos a rotação em torno dos eixos z, x e y:
index.html
index.css
Obrigado pelo seu feedback!
