Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Gostaria de saber como iria ficar o CSS se eu quisesse por o botão para girar no sentido horário e depois para o sentido anti-horário.

Na aula "Aumentando proporcionalmente" do Curso "HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas" o professor mostrou como por o botão de enviar formulário para girar usando o código:

rotate(1000deg);

Por ter colocado os graus positivos o comando acima faz com que o botão gire no sentido horário e se colocando "-1000" (graus negativos) ele iria gira no sentido anti-horário.

Gostaria de saber o que é necessário ser feito no código para que ele gire inicialmente para o sentido horário e ao terminar o giro ele gire automaticamente ele gire para o sentido contrário. Pois usando os comandos:

rotate(1000deg);
rotate(-1000deg);

A segunda linha sobre escreve a anterior e o botão gira apenas no sentido anti-horário.

Resumindo: O que seria necessário fazer no código para que ele inicialmente gire 1000 graus no sentido horário e depois girar 1000 graus no sentido anti-horário?

3 respostas
solução!

Fala ai Bruno, tudo bem? Nesse caso você poderia utilizar as animações do CSS, seria algo mais ou menos assim:

<button class="rotate">Rotate me</button>
.rotate {
  display: inline-block;
  color: red;
  padding: 1rem;
  transition: all 2s;
}

.rotate:hover {
  cursor: pointer;
  animation: rotate 2s forwards;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(100deg);
  }
  100% {
    transform: rotate(-50deg);
  }
}

Repare que eu criei uma animação chamada rotate que inicia com nenhuma rotação, quando ela atingir metade do seu tempo, deve estar com 100deg de rotação e da metade para o fim a rotação volta para -50deg.

E essa animação somente é aplicada no hover do botão.

Espero ter ajudado.

Muito obrigado, ajudou bastante. A partir da sua explicação eu conseguirei fazer várias animações usando essa técnica.

Magina Bruno, sempre que precisar não deixe de criar sua dúvidas.

Abraços e bons estudos.