Tilt (3D no mouse) Animações

Inclina o elemento em 3D seguindo a posição do mouse — cards de produto, capas.

O que é

Dá profundidade a um card/imagem inclinando-o levemente conforme o cursor se move por cima, simulando perspectiva 3D.

Como funciona

Mede a posição do cursor relativa ao centro do elemento e converte em graus de rotação 3D (rotateX/rotateY), com um leve brilho (glare) opcional acompanhando.

Exemplos

Card que inclina — passe o mouse Ao vivo

Passe o mouse por aqui

<div sw-ani="tilt">inclina em 3D seguindo o mouse</div>

Quanto ele inclina Ao vivo

max="5"

discreto

(padrão)

equilibrado

max="25"

exagerado

<div sw-ani="tilt" sw-ani-max="5">discreto</div>
<div sw-ani="tilt">padrão</div>
<div sw-ani="tilt" sw-ani-max="25">exagerado</div>

Com reflexo (glare) Ao vivo

<div sw-ani="tilt" sw-ani-glare>
  <img src="/capa.jpg" alt="">
</div>

<!-- o reflexo faz mais sentido sobre imagem do que sobre texto -->

Vitrine de capas Ao vivo

Produto A

Produto B

Produto C

<div class="l l-3">
  <div sw-ani="tilt" sw-ani-glare class="bg-sur bd r-m">
    <img src="/produto.jpg" alt="">
    <div class="p-m">Produto A</div>
  </div>
</div>

Atributos

sw-ani-max

inclinação máxima, em graus — quanto maior, mais dramático

sw-ani-glare

liga um brilho que corre pela superfície acompanhando o cursor

Variantes

(sem sw-ani-max)

inclinação discreta, boa pra card de conteúdo

sw-ani-max="5"

quase imperceptível — dá só uma "vida" ao passar o mouse

sw-ani-max="25"

bem inclinado — chama atenção, cansa se usado demais

sw-ani-glare

acrescenta o reflexo, como numa capa plastificada

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Precisa do pacote swcore.motion.min.css/js.

Limitações — o que ele não faz

É efeito de mouse: em celular, onde não há ponteiro, o card fica parado. Não ponha informação só no estado inclinado.
Inclinação forte em muitos cards ao mesmo tempo deixa a página inquieta — use com parcimônia.

← AnteriorMotion Path Próximo →Magnetic (ímã)