Codrspace - Comment Flip avec CSS3 Transitions Flashcards par kara

J'ai récemment mis en œuvre l'animation flip linker pour un projet client, et il m'a fallu un certain temps pour le CSS correct. Il se avère que WebKit a des propriétés assez étonnantes pour cela.

NOTE: Cela ne fonctionne que dans les navigateurs Chrome et Safari. Sur Mozilla, le flip se produira sans l'animation.

Voir animation ici.

Du côté HTML, vous aurez besoin de quatre divs:

1. Un div « étape » (une enveloppe pour installation entière)
2. Un div « linker » (une enveloppe pour les deux faces d'une carte flash)
3. Un div « avant »
4. Un div « arrière »

Votre DOM devrait ressembler à ceci:

Alors, pourquoi les deux divs externes pour une animation simple?

Le div « étape » est nécessaire pour que nous puissions éventuellement définir la perspective (à savoir la distance) pour visualiser l'animation. Nous devons nous assurer que le public ne soit pas si proche à la « scène » qu'ils ne peuvent pas voir la grande image (par exemple, la première ligne à une salle de cinéma) ou si loin que tout est trop petit (par exemple, le saignement de nez section). Plus sur le sujet plus tard.

Le div linker est ce que nous allons effectivement en train de feuilleter (avec ses enfants - le « avant » et « arrière » divs). Il est important de retourner l'élément extérieur de sorte que la rotation de l'animation sera visible et cohérente. Si vous retournez juste le « avant » et « arrière » et non la div extérieure, l'animation semble étrange parce que vous voyez la première moitié de l'animation du côté et en laissant la dernière moitié de l'animation du côté d'entrée.

Bon, à côté, nous allons ajouter un texte aux côtés de notre linker afin que nous puissions déterminer de quel côté nous sommes sur.

La première chose, il faut ajouter une certaine structure à notre linker en ajoutant une hauteur et la largeur à notre linker div. Avec à peine contenu, la valeur par défaut est assez petit. Nous voulons aussi ajouter la frontière et box-shadow immédiatement afin que nous puissions voir les limites du linker. Techniquement, le box-shadow est facultative, mais l'ombrage contribue à rendre l'animation plus visible.

Problème suivant. Nous ne voulons pas clairement les deux côtés de la projection flashcard en même temps. Nous voulons montrer un côté ou l'autre. Pour masquer la face arrière, nous allons tourner le « .retour » div de la route avec la propriété « transformer ». Il suffit d'entrer le nombre de degrés que vous vivrais pour transformer le texte sur l'axe x.

Le texte de la div « arrière » a été tourné à l'envers.

Problème suivant. Nous ne voulons pas que les versions renversées du texte à afficher sur la face arrière du linker. Nous voulons que la face avant - avec le côté droit en texte - à montrer. Heureusement, il y a une propriété de webkit appelé -webkit-backface visibilité qui a été conçu pour cacher la face arrière des éléments mis en rotation. Nous avons simplement besoin de définir cette propriété à « caché » sur les deux « avant » et « arrière » et le texte divs disparaîtra si elle est mise en rotation.

Dans cette prochaine version. le texte de la div arrière a disparu de la face avant comme prévu.

A faire: La carte n'a pas encore flip. Ajoutons un événement de clic pour app.js qui renversera la carte au-dessus (ou, techniquement, ajouter une classe qui bascule le texte sur la CSS). Rappelez-vous de plus tôt que nous voulons retourner toute linker div. pas seulement les côtés individuels. Donc clic, nous allons basculer une classe sur le linker div.

Nous allons utiliser exactement la même propriété « transformer » pour faire tourner la div flashcard, donc ajoutons juste la classe « basculée » au code existant pour la div « back ».

Faire. Nous ne pouvons pas vraiment voir l'animation au moment. Il passe juste avant et en arrière entre les côtés. Pour ralentir la transition, nous pouvons utiliser la propriété « de transition ». La propriété « de transition » surveille la valeur d'une propriété spécifique et si cette modification de la propriété, ralentit le passage d'une valeur à une autre en une quantité prescrite de temps. Cette propriété doit être définie sur la div « linker » parce qu'il est l'élément qui est en rotation fait en cliquant dessus.

Pour l'instant, nous allons définir le rabat pour arriver dans la propriété « 0.3s » et surveiller « tous les » changements sur « linker », juste pour être sûr.

Hourra, nous pouvons voir la rotation. Mais l'animation semble encore un peu « off ». Le problème est la perspective. On n'a pas dit au navigateur de quel point nous aimerions voir l'animation, et la valeur par défaut ne semble pas grande.

Heureusement, nous pouvons utiliser la propriété -webkit-perspective pour régler la distance de visualisation. Plus la valeur de cette propriété, le plus loin, vous êtes de la « scène ». « 1000 » devrait être à peu près juste pour cette animation - nous devons être assez loin pour voir le plein flip.

Flip regarde maintenant droit. Essayez de jouer avec la valeur de « perspective » - vous verrez que si elle est trop petite, l'animation devient énorme.

La dernière chose - faisons le texte un peu plus grand et le centre du div:

Ce qui nous amène au produit final ici.

Code complet ci-dessous: