Vire um cartão 3D com CSS: resolvendo o problema de inversão

Semelhante a muitos efeitos baseados em CSS, conseguir uma animação de inversão de cartão 3D requer uma compreensão abrangente das propriedades de transformação e visibilidade da face traseira. Vamos nos aprofundar no CSS fornecido e solucionar por que o cartão exibe um comportamento de encaixe em vez de uma virada suave.

O CSS fornecido posiciona as faces frontal e traseira do cartão absolutamente dentro de um contêiner pai. A propriedade perspective define a perspectiva do visualizador, enquanto transform-style e backface-visibility garantem que ambas as faces sejam renderizadas e visíveis. A propriedade de transição especifica que a animação de transformação deve levar 1 segundo.

Quando o cursor passa sobre o cartão, a propriedade de transformação da face posterior é alterada para girarY(180deg). Essa rotação é o que causa o efeito de inversão. No entanto, o problema está na propriedade de transformação inicial da face posterior: como está definida como nenhuma, a animação de rotação começa a partir desse estado, resultando no encaixe instantâneo do cartão na face posterior.

Para alcançar o desejado giro suave, podemos inicializar a face posterior com uma rotação de 180 graus. Isso posiciona a face posterior no estado "invertido" desejado no início. Ao passar o mouse, podemos girá-lo ainda mais para 360 graus, completando uma virada completa.

Ao implementar esses ajustes, você pode criar facilmente uma animação de virada de cartão 3D baseada em CSS sem o problema de encaixe. O cartão agora fará a transição perfeita da frente para trás ao passar o mouse, proporcionando uma experiência de usuário envolvente e envolvente.