A função de rotação CSS () distorce um elemento em um certo número de graus. Você pode girar um elemento no sentido horário usando um número positivo de graus. Ou você pode girar um item no sentido anti-horário usando um número negativo.
Hoje vamos aprender como girar elementos com CSS. Por que girar um elemento? Elementos rotativos tornam sua página da web mais interativa. Usado corretamente, um elemento rotativo adicionará à estética do seu site.
Ao ler este artigo, consulte repositório complementar , para que você possa ver os conceitos em ação. Saber como girar um elemento será um ótimo complemento para sua caixa de ferramentas CSS.
CSS girar ()
A função CSS girar () permite que você girar um elemento em um eixo 2D. A função de rotação () recebe um argumento: o ângulo no qual você deseja girar seu elemento da web. Você pode girar um elemento no sentido horário ou anti-horário.
Vejamos a sintaxe da função de rotação ():
O valor "angle" representa o número de graus que o elemento deve girar. Você pode especificar uma rotação no sentido horário usando um número positivo de graus (por exemplo, 45). Ou você pode girar na direção oposta usando um valor de grau negativo (por exemplo, -39).
A função girar () pode ser aplicada a qualquer elemento HTML. Por exemplo, você pode girar um parágrafo de texto. Ou você pode girar uma imagem.
Uma rotação HTML aparece assim que você renderiza a página, portanto, não há rotação visível. Para ver a rotação em ação, você precisa usar uma transição CSS . As transições alteram o estado de um elemento quando uma ação é executada, como quando um cursor passa sobre um elemento.
