Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Introdução às Transformações CSS | Transformando Elementos com CSS
Técnicas Avançadas de CSS

bookIntrodução às Transformações CSS

Podemos adicionar movimento às nossas páginas web. As transformações modificam a forma e a posição de um elemento sem afetar o restante da página. Assim, seremos capazes de criar os seguintes efeitos:

Podemos adicionar escala aos elementos:

Podemos adicionar rotação aos elementos:

Podemos adicionar translação aos elementos:

Podemos adicionar inclinação aos elementos:

Nota

Todos esses efeitos são obtidos com a ajuda de uma única propriedade - transform, utilizando diferentes valores. Também é importante mencionar que animation e @keyframe foram adicionados apenas para mostrar a diferença entre o estado inicial e o estado final do elemento. Isso não significa que transform é utilizado apenas com algumas animações. Todos os efeitos serão abordados em detalhes nos próximos capítulos.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 1

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.04

bookIntrodução às Transformações CSS

Deslize para mostrar o menu

Podemos adicionar movimento às nossas páginas web. As transformações modificam a forma e a posição de um elemento sem afetar o restante da página. Assim, seremos capazes de criar os seguintes efeitos:

Podemos adicionar escala aos elementos:

Podemos adicionar rotação aos elementos:

Podemos adicionar translação aos elementos:

Podemos adicionar inclinação aos elementos:

Nota

Todos esses efeitos são obtidos com a ajuda de uma única propriedade - transform, utilizando diferentes valores. Também é importante mencionar que animation e @keyframe foram adicionados apenas para mostrar a diferença entre o estado inicial e o estado final do elemento. Isso não significa que transform é utilizado apenas com algumas animações. Todos os efeitos serão abordados em detalhes nos próximos capítulos.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 1
some-alt