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
Can you explain the difference between rotating around the x, y, and z axes?
What are some practical uses for rotating elements in CSS?
Can you show more examples of using the rotate() function with different units?
Awesome!
Completion rate improved to 2.08Rotacionando 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!
