Efeito de rotação “rotate” + efeito grow, rotacionando um elemento

Como criar o efeito de rotação “rotate” com CSS e combina-lo com efeito “grow” utilizando as propriedades transform: rotate(…) e transition-duration.

Animação é bem simples, utilizando a propriedade “rotate” do CSS, conseguimos fazer uma rotação no elemento.

Exemplo

Exemplo com efeito “Rotate”

Código CSS utilizado:

.rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.rotate:hover, .rotate:focus, .rotate:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}

Aumente a propriedade transform: rotate para aumentar o graus que o elemento será rotacionado.

Para alterar a velocidade de execução mude transition-duration.

Efeito de rotação + efeito grow

.grow-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}

 

Exemplo com efeito “Rotate + Grow”

CSS reduzido

Código CSS com tamanho reduzido para você incluir em seu projeto.

.grow-rotate,.rotate{display:inline-block;vertical-align:middle;box-shadow:0 0 1px transparent}.rotate{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform}.rotate:active,.rotate:focus,.rotate:hover{-webkit-transform:rotate(4deg);transform:rotate(4deg)}.grow-rotate{-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform}.grow-rotate:active,.grow-rotate:focus,.grow-rotate:hover{-webkit-transform:scale(1.1) rotate(4deg);transform:scale(1.1) rotate(4deg)}