Retourner une carte 3D avec CSS : résoudre le problème de retournement

Semblable à de nombreux effets basés sur CSS, la réalisation d'une animation de retournement de carte 3D nécessite une compréhension complète des propriétés de transformation et de visibilité de la face arrière. Examinons le CSS fourni et déterminons pourquoi la carte présente un comportement d'accrochage au lieu d'un retournement fluide.

Le CSS fourni positionne les faces avant et arrière de la carte absolument dans un conteneur parent. La propriété perspective définit la perspective du spectateur, tandis que transform-style et backface-visibility garantissent que les deux faces sont rendues et visibles. La propriété de transition spécifie que l'animation de transformation doit prendre 1 seconde.

Lorsque le curseur survole la carte, la propriété de transformation de la face arrière est modifiée en rotateY (180deg). Cette rotation est à l’origine de l’effet de retournement. Cependant, le problème réside dans la propriété de transformation initiale de la face arrière : comme elle est définie sur aucun, l'animation de rotation démarre à partir de cet état, ce qui entraîne un alignement instantané de la carte sur la face arrière.

Pour obtenir l'effet souhaité. flip fluide, nous pouvons initialiser la face arrière avec une rotation de 180deg. Cela positionne la face arrière dans l'état « renversé » souhaité au départ. En survol, nous pouvons la faire pivoter davantage à 360 degrés, ce qui lui permet d'effectuer un retournement complet.

En mettant en œuvre ces ajustements, vous pouvez facilement créer une animation de retournement de carte 3D basée sur CSS sans problème d'accrochage. La carte passera désormais de manière transparente de l'avant à l'arrière au survol, offrant une expérience utilisateur immersive et engageante.