• Traduction

Bonjour, cher ami Habra ! Il existe de nombreux exemples en ligne d'utilisations intéressantes des transformations et des transitions en CSS3. Dans cet article, nous passerons en revue les bases de CSS3 et apprendrons comment créer quelque chose comme ceci. Ce tutoriel sera utile à ceux qui viennent de commencer à se familiariser avec CSS3. Commençons !

Système de coordonnées

Pour mieux comprendre le fonctionnement du mouvement d'un objet, nous travaillerons dans un système de coordonnées.


Cependant, notre système de coordonnées présente une particularité : l’axe Y est orienté dans la direction opposée à celle habituelle. Pourquoi? Le fait est que HTML et CSS (ainsi que, par exemple, ActionScript) utilisent un système de coordonnées inverse, puisque la page Web commence dans le coin supérieur gauche et descend.
Note: Nous supposerons que vous êtes déjà familier avec la structure HTML et CSS. Je n'expliquerai pas comment personnaliser le fichier CSS, comment placer des images, etc. Nous nous concentrerons sur l’animation des images. Si vous n'êtes pas sûr d'avoir des compétences élevées, nous vous recommandons de consulter le cours « HTML et CSS en 30 jours » (gratuit et en anglais) pour apprendre tout ce dont vous avez besoin.

1 : Mouvement horizontal

Le premier mouvement que nous démontrerons est horizontal. Nous déplacerons les objets de gauche à droite et de droite à gauche.

Se déplacer vers la droite

Pour déplacer un objet, nous utiliserons transformer : traduire (x, y), où X est un nombre positif et Y=0.


HTML
Ouvrez votre éditeur de code préféré et saisissez ce qui suit :

Nous avons défini trois classes pour l'image :

• objet : Établir les règles de base de notre objet.
• van : Nous utiliserons différents objets pour démontrer chaque type d'animation.
• move-right : En utilisant cette classe, nous déplacerons notre objet.

CSS
Tout d’abord, nous placerons notre objet (l’image du camion) au centre.
.object ( position : absolue ; ) .van ( haut : 45 % ; gauche : 44 % ; )
Dans cet exemple, nous déplacerons l'objet de 350 pixels vers la droite. Syntaxe utilisée transformer : traduire (350px,0);. De plus, l'objet ne bougera que lorsque vous le survolerez : #axis: survolez .move-right.

#axis:hover .move-right( transform: traduire(350px,0); -webkit-transform: traduire(350px,0); /** Chrome et Safari **/ -o-transform: traduire(350px,0) ; /** Opera **/ -moz-transform: traduire(350px,0);
Paramètre transformer déplacera uniquement l'objet d'un point à un autre, mais ne créera pas d'animation de ce mouvement. Pour résoudre ce problème, vous devez ajouter un paramètre de déplacement à class.object.

Objet ( position : absolue ; transition : entrée-sortie facile pour tous les 2 ; -webkit-transition : entrée-sortie facile pour tous les 2 ; /** Chrome et Safari **/ -moz-transition : entrée-sortie facile pour tous les 2 ; /** Firefox **/ -o-transition : tous les 2 sont faciles à entrer /** Opera **/ )
Cette règle de déplacement indiquera au navigateur d'animer Tous paramètres d'objet sur 2 secondes(sans délai) en utilisant la fonction facilité d'entrée et de sortie.
Nous pouvons utiliser 6 fonctions de synchronisation de mouvement différentes :

• linéaire: Le mouvement se déroule à une vitesse constante du début à la fin.
• facilité: Le mouvement démarre lentement puis s'accélère.
• facilité d'entrée: Le mouvement commence lentement.
• facilité: Le mouvement se termine lentement.
• facilité d'entrée et de sortie: Le mouvement commence et se termine lentement.
• bézier cubique: Déterminez manuellement la valeur du mouvement.

Se déplacer vers la gauche

Pour déplacer un objet vers la gauche, il suffit de mettre une valeur négative sur l'axe OH, alors que Oui reste inchangé. Dans notre cas, nous déplacerons l'objet vers - 350pxÀ gauche.

HTML
Créez un nouveau document html et collez le code suivant :

Cette fois, nous utilisons la classe déplacer vers la gauche pour déplacer l'objet vers la gauche.

CSS
Entrons maintenant -350px pour l'axe OX. transformer : traduire (-350px,0);- déplacez l'objet vers la gauche.
#axis:hover .move-left ( transform: traduire(-350px,0); -webkit-transform: traduire(-350px,0); /** Safari et Chrome **/ -o-transform: traduire(-350px ,0); /** Opera **/ -moz-transform: traduire(-350px,0);
Puisque nous avons déjà défini les règles de déplacement plus tôt, nous n'avons pas besoin de le refaire.

2 : Mouvement vertical

Déplacer un objet verticalement ne sera pas difficile, car il est identique à l'objet horizontal. La seule différence est que nous utiliserons la valeur -y pour progresser et valoriser oui pour descendre.

Monter

HTML
Le modèle HTML est identique aux exemples précédents. Cependant, nous remplacerons notre objet par une fusée (pour plus de clarté) et lui attribuerons une classe de progression.

CSS
Tout comme le camion, nous placerons la fusée au centre :
.rocket ( haut : 43 % ; gauche : 44 % ; )
Comme nous l'avons noté précédemment, la coordonnée Y doit être négative. Dans notre cas, nous déplacerons l'objet de 350 pixels vers le haut.

#axis:hover .move-up ( transform: traduire(0,-350px); -webkit-transform: traduire(0,-350px); -o-transform: traduire(0,-350px); -moz-transform : traduire(0,-350px )

Descendons

Comme vous l'avez peut-être deviné, pour déplacer un objet vers le bas, la coordonnée Y doit être positive et la coordonnée X doit être 0. Syntaxe : traduire(0,y);

HTML

CSS
#axis:hover .move-down ( transform: traduire(0,350px); -webkit-transform: traduire(0,350px); -o-transform: traduire(0,350px); -moz-transform: traduire(0,350px); )

3 : Mouvement diagonal

Pour déplacer un objet en diagonale, nous combinerons les paramètres x Et oui. La syntaxe sera la suivante : transformer : traduire (x, y). Selon la direction, la valeur x Et oui peut être positif ou négatif.

HTML

CSS
#axis:hover .move-ne ( transform: traduire(350px,-350px); -webkit-transform: traduire(350px,-350px); -o-transform: traduire(350px,-350px); -moz-transform : traduire(350px,-350px )

4 : Rotation

La rotation dans CSS3 est contrôlée par des coordonnées en degrés (de 0° à 360°). Pour faire pivoter un objet, appliquez les options suivantes : transformation : rotation (ndeg); Où n- les diplômes.

Rotation dans le sens des aiguilles d'une montre

Pour faire pivoter un objet dans le sens des aiguilles d'une montre, appliquez une valeur positive à faire pivoter (ndeg).

HTML

CSS
#axis:hover .rotate360cw ( transformation : rotation (360deg); -webkit-transform: rotation (360deg); -o-transform: rotation (360deg); -moz-transform: rotation (360deg); )

Rotation dans le sens inverse des aiguilles d'une montre

Pour faire pivoter un objet dans le sens inverse des aiguilles d'une montre, appliquez une valeur négative à faire pivoter (ndeg).

HTML

CSS
#axis:hover .rotate360ccw ( transformation : rotation (-360deg); -webkit-transform: rotation (-360deg); -o-transform: rotation (-360deg); -moz-transform: rotation (-360deg); )

5 : Mise à l’échelle

La mise à l'échelle est une fonctionnalité intéressante de CSS3. Utilisation du paramètre échelle(n) ou paramètre échelle (x, y), nous pouvons augmenter ou diminuer l'objet directement dans le HTML. L'objet changera de taille en fonction de la valeur de n/x,y, où l'axe X est la largeur et l'axe Y est la hauteur.
Regardons l'exemple suivant.

• Traduction

Bonjour, cher ami Habra ! Il existe de nombreux exemples en ligne d'utilisations intéressantes des transformations et des transitions en CSS3. Dans cet article, nous passerons en revue les bases de CSS3 et apprendrons comment créer quelque chose comme ceci. Ce tutoriel sera utile à ceux qui viennent de commencer à se familiariser avec CSS3. Commençons !

Système de coordonnées

Pour mieux comprendre le fonctionnement du mouvement d'un objet, nous travaillerons dans un système de coordonnées.


Cependant, notre système de coordonnées présente une particularité : l’axe Y est orienté dans la direction opposée à celle habituelle. Pourquoi? Le fait est que HTML et CSS (ainsi que, par exemple, ActionScript) utilisent un système de coordonnées inverse, puisque la page Web commence dans le coin supérieur gauche et descend.
Note: Nous supposerons que vous êtes déjà familier avec la structure HTML et CSS. Je n'expliquerai pas comment personnaliser le fichier CSS, comment placer des images, etc. Nous nous concentrerons sur l’animation des images. Si vous n'êtes pas sûr d'avoir des compétences élevées, nous vous recommandons de consulter le cours « HTML et CSS en 30 jours » (gratuit et en anglais) pour apprendre tout ce dont vous avez besoin.

1 : Mouvement horizontal

Le premier mouvement que nous démontrerons est horizontal. Nous déplacerons les objets de gauche à droite et de droite à gauche.

Se déplacer vers la droite

Pour déplacer un objet, nous utiliserons transformer : traduire (x, y), où X est un nombre positif et Y=0.


HTML
Ouvrez votre éditeur de code préféré et saisissez ce qui suit :

Nous avons défini trois classes pour l'image :

• objet : Établir les règles de base de notre objet.
• van : Nous utiliserons différents objets pour démontrer chaque type d'animation.
• move-right : En utilisant cette classe, nous déplacerons notre objet.

CSS
Tout d’abord, nous placerons notre objet (l’image du camion) au centre.
.object ( position : absolue ; ) .van ( haut : 45 % ; gauche : 44 % ; )
Dans cet exemple, nous déplacerons l'objet de 350 pixels vers la droite. Syntaxe utilisée transformer : traduire (350px,0);. De plus, l'objet ne bougera que lorsque vous le survolerez : #axis: survolez .move-right.

#axis:hover .move-right( transform: traduire(350px,0); -webkit-transform: traduire(350px,0); /** Chrome et Safari **/ -o-transform: traduire(350px,0) ; /** Opera **/ -moz-transform: traduire(350px,0);
Paramètre transformer déplacera uniquement l'objet d'un point à un autre, mais ne créera pas d'animation de ce mouvement. Pour résoudre ce problème, vous devez ajouter un paramètre de déplacement à class.object.

Objet ( position : absolue ; transition : entrée-sortie facile pour tous les 2 ; -webkit-transition : entrée-sortie facile pour tous les 2 ; /** Chrome et Safari **/ -moz-transition : entrée-sortie facile pour tous les 2 ; /** Firefox **/ -o-transition : tous les 2 sont faciles à entrer /** Opera **/ )
Cette règle de déplacement indiquera au navigateur d'animer Tous paramètres d'objet sur 2 secondes(sans délai) en utilisant la fonction facilité d'entrée et de sortie.
Nous pouvons utiliser 6 fonctions de synchronisation de mouvement différentes :

• linéaire: Le mouvement se déroule à une vitesse constante du début à la fin.
• facilité: Le mouvement démarre lentement puis s'accélère.
• facilité d'entrée: Le mouvement commence lentement.
• facilité: Le mouvement se termine lentement.
• facilité d'entrée et de sortie: Le mouvement commence et se termine lentement.
• bézier cubique: Déterminez manuellement la valeur du mouvement.

Se déplacer vers la gauche

Pour déplacer un objet vers la gauche, il suffit de mettre une valeur négative sur l'axe OH, alors que Oui reste inchangé. Dans notre cas, nous déplacerons l'objet vers - 350pxÀ gauche.

HTML
Créez un nouveau document html et collez le code suivant :

Cette fois, nous utilisons la classe déplacer vers la gauche pour déplacer l'objet vers la gauche.

CSS
Entrons maintenant -350px pour l'axe OX. transformer : traduire (-350px,0);- déplacez l'objet vers la gauche.
#axis:hover .move-left ( transform: traduire(-350px,0); -webkit-transform: traduire(-350px,0); /** Safari et Chrome **/ -o-transform: traduire(-350px ,0); /** Opera **/ -moz-transform: traduire(-350px,0);
Puisque nous avons déjà défini les règles de déplacement plus tôt, nous n'avons pas besoin de le refaire.

2 : Mouvement vertical

Déplacer un objet verticalement ne sera pas difficile, car il est identique à l'objet horizontal. La seule différence est que nous utiliserons la valeur -y pour progresser et valoriser oui pour descendre.

Monter

HTML
Le modèle HTML est identique aux exemples précédents. Cependant, nous remplacerons notre objet par une fusée (pour plus de clarté) et lui attribuerons une classe de progression.

CSS
Tout comme le camion, nous placerons la fusée au centre :
.rocket ( haut : 43 % ; gauche : 44 % ; )
Comme nous l'avons noté précédemment, la coordonnée Y doit être négative. Dans notre cas, nous déplacerons l'objet de 350 pixels vers le haut.

#axis:hover .move-up ( transform: traduire(0,-350px); -webkit-transform: traduire(0,-350px); -o-transform: traduire(0,-350px); -moz-transform : traduire(0,-350px )

Descendons

Comme vous l'avez peut-être deviné, pour déplacer un objet vers le bas, la coordonnée Y doit être positive et la coordonnée X doit être 0. Syntaxe : traduire(0,y);

HTML

CSS
#axis:hover .move-down ( transform: traduire(0,350px); -webkit-transform: traduire(0,350px); -o-transform: traduire(0,350px); -moz-transform: traduire(0,350px); )

3 : Mouvement diagonal

Pour déplacer un objet en diagonale, nous combinerons les paramètres x Et oui. La syntaxe sera la suivante : transformer : traduire (x, y). Selon la direction, la valeur x Et oui peut être positif ou négatif.

HTML

CSS
#axis:hover .move-ne ( transform: traduire(350px,-350px); -webkit-transform: traduire(350px,-350px); -o-transform: traduire(350px,-350px); -moz-transform : traduire(350px,-350px )

4 : Rotation

La rotation dans CSS3 est contrôlée par des coordonnées en degrés (de 0° à 360°). Pour faire pivoter un objet, appliquez les options suivantes : transformation : rotation (ndeg); Où n- les diplômes.

Rotation dans le sens des aiguilles d'une montre

Pour faire pivoter un objet dans le sens des aiguilles d'une montre, appliquez une valeur positive à faire pivoter (ndeg).

HTML

CSS
#axis:hover .rotate360cw ( transformation : rotation (360deg); -webkit-transform: rotation (360deg); -o-transform: rotation (360deg); -moz-transform: rotation (360deg); )

Rotation dans le sens inverse des aiguilles d'une montre

Pour faire pivoter un objet dans le sens inverse des aiguilles d'une montre, appliquez une valeur négative à faire pivoter (ndeg).

HTML

CSS
#axis:hover .rotate360ccw ( transformation : rotation (-360deg); -webkit-transform: rotation (-360deg); -o-transform: rotation (-360deg); -moz-transform: rotation (-360deg); )

5 : Mise à l’échelle

La mise à l'échelle est une fonctionnalité intéressante de CSS3. Utilisation du paramètre échelle(n) ou paramètre échelle (x, y), nous pouvons augmenter ou diminuer l'objet directement dans le HTML. L'objet changera de taille en fonction de la valeur de n/x,y, où l'axe X est la largeur et l'axe Y est la hauteur.
Regardons l'exemple suivant.
2.
2.

Faire pivoter un élément en utilisant CSS 3

De temps en temps, les concepteurs de sites Web sont confrontés au problème de la rotation d'un élément. Grâce à CSS 3, ce problème a désormais une solution assez simple. Encore une fois, pour des raisons de compatibilité entre navigateurs, vous devez spécifier plusieurs propriétés. Vous trouverez ci-dessous un exemple de code pour faire pivoter un élément de 90 degrés.

Code CSS

#rotate_element (
-webkit-transform : rotation (90 degrés) ; // fait pivoter l'élément pour différents navigateurs



transformation : rotation (90 degrés) ;
}

Alignement et direction du texte en utilisant CSS 3

Maintenant plus sur la propriété mode d'écriture. Il permet de définir l'alignement (gauche - droite) du texte de l'élément et, plus intéressant encore, la direction (horizontale ou verticale) ! Regardons et essayons :

lr-tb le texte est orienté de gauche à droite.
rl-tb le texte est orienté de droite à gauche.
tb-rl Le texte est dirigé verticalement et aligné en haut et à droite.
bt-rl le texte est dirigé verticalement et aligné sur le bord inférieur et droit.
to-lr Le texte est dirigé verticalement et aligné en haut et à gauche.
bt-lr le texte est dirigé verticalement et aligné sur les bords inférieur et gauche.
En utilisant l'exemple de la phrase le texte va ici vous pouvez considérer l'effet des propriétés CSS

Code CSS

Texte (
mode d'écriture : lr-tb ; /* le texte est dirigé de gauche à droite */
}

Texte 1 (
mode d'écriture : rb-tb ; /* le texte est dirigé de droite à gauche */
}

Exemple de rotation de texte de 90 degrés et d'alignement de texte CSS 3

Voici un exemple terminé. Faites pivoter le texte de 90 degrés. Pour ce faire, créez simplement un bloc avec l'identifiant rotateText et définissez ses propriétés CSS.

Code HTML et CSS

Exemple La rotation d'un élément de 90 degrés en CSS peut être consultée sur le lien ci-dessous.

La fonction rotate() en CSS effectue une transformation de rotation bidimensionnelle sur un élément autour d'un centre fixe. Dans ce cas, le bloc n'est pas déformé et n'affecte pas la position des conteneurs HTML voisins. La méthode vous permet de spécifier l'angle de rotation. De plus, il est possible de définir un centre de rotation arbitraire.

Transformation de bloc

En CSS, rotate() est une fonction de transformation, elle doit donc être transmise à la propriété transform de l'élément.

Élément ( transformer: rotate(45deg); )

Le premier et unique argument est l’angle de rotation de l’objet. La rotation s'effectue dans un espace bidimensionnel. Pour les transformations 3D, il existe les fonctions CSS rotateX(), rotateY(), rotateZ() et rotate3d().

L'espace de la page initialement occupé par l'élément lui reste réservé. Le mouvement visuel se produit dans un nouveau calque sans déplacer les blocs adjacents.

Angle de rotation

L'argument angle passé à la méthode doit être de type CSS . Il se compose d'une valeur numérique et d'une unité de mesure degré (de l'anglais degré - degré).

Un angle positif détermine la rotation de l'objet dans le sens des aiguilles d'une montre, un angle négatif - dans le sens opposé.

Centre de rotation

Par défaut, le bloc pivote autour de son centre géométrique. Pour modifier ce point, vous devez utiliser la propriété transform-origin.

Par défaut, il faut trois paramètres qui définissent les coordonnées le long des axes X, Y et Z. Mais comme rotate() en CSS est une transformation bidimensionnelle, il suffira de transmettre seulement deux valeurs.

Élément ( transformation : rotation (45 degrés ); transformation-origine : 20 px 100 % ; )

Les coordonnées le long de chaque axe peuvent être spécifiées dans n'importe quelle unité de longueur valide, en pourcentage de la taille du bloc ou en utilisant les mots-clés haut, bas, gauche, droite. L'origine est située dans le coin supérieur gauche du conteneur rectangulaire.

Animation de rotation

La propriété transform se prête bien aux changements dynamiques, c'est pourquoi CSS vous permet de créer une animation de la rotation d'un élément dans un espace bidimensionnel.

Si vous souhaitez faire pivoter un objet en réponse à une action utilisateur spécifique, telle que le survol du curseur, vous pouvez utiliser la propriété de transition CSS pour modifier lentement la valeur des autres propriétés.

Élément ( transition : transformation 2s; ) élément : survol ( transformation : rotation (180deg); )

Aucune transformation n'est appliquée à l'élément d'origine, mais lorsque vous le survolez, le bloc pivote en douceur de 180 degrés en deux secondes. Lorsque l'utilisateur supprime le curseur, la même rotation douce vers la position d'origine se produira.

Une manière plus complexe d'animer un objet consiste à définir sa séquence d'images à l'aide de propriétés et de la règle @keyframes.

Élément ( nom de l'animation : rotation ; durée de l'animation : 2 s ; nombre d'itérations d'animation : infini ; fonction de synchronisation de l'animation : linéaire ; ) @keyframes rotation (de ( transformation : rotation (0deg); ) à ( transformation : rotation (360 degrés);

Une animation de rotation est appliquée à l'élément spécifié, le faisant pivoter complètement de 0 à 360 degrés en deux secondes. La propriété animation-iteration-count définit l'animation pour qu'elle se répète indéfiniment et la fonction animation-timing-function définit un effet de transition fluide. La combinaison de la propriété in avec les transformations de rotation vous permet de créer de superbes effets dynamiques.

Aujourd'hui, nous allons examiner un effet aussi merveilleux qui s'offre à nous grâce à CSS3. Nous parlons de faire pivoter un bloc ou une image. Il s’intègre à merveille dans l’interface du site et, après avoir maîtrisé cette leçon, vous pourrez appliquer cet effet dans vos projets.

Nous avons donc un ensemble de blocs avec du contenu. Nous voulons que lorsque nous survolons un bloc, il tourne autour de son axe et affiche des informations au dos. Je pense que tout le monde a joué aux cartes à un moment donné et tout le monde se souvient de ce moment passionnant où il a fallu les retourner face visible. Nous ferons la même chose maintenant. Voici notre exemple original :

Commençons à écrire notre CSS. La première chose que nous devons faire, puisque nous travaillons avec des transformations 3D, est de définir la distance de notre objet par rapport au point de vue. Et voici le premier code merdique :

Conteneur rabattable ( -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspective:1000; )

Vous pouvez spécifier n'importe quel autre numéro. Expérimentez par vous-même. Les parties avant (.front) et arrière (.back) de notre carte à jouer doivent être positionnées de manière absolue de manière à ce qu'elles se « chevauchent » dans leur position finale. Nous devons également nous assurer que le verso des éléments retournés n'est pas affiché pendant l'animation. La propriété backface-visibility nous aidera avec ceci :

Avant, .back ( -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; largeur:100%; hauteur:100%; position: absolu ; haut : 0 ; gauche : 0 ;

Définissons l'index z pour la face avant (de sorte qu'il soit en haut dans l'état par défaut) et décrivons les angles de rotation par défaut par rapport à l'axe vertical :

/* Le recto est placé au-dessus du verso */ .front ( -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg ); transform: rotateY(0deg); z-index: 2; ) /* inverse, côté initialement caché */ .back ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz -transformation : rotationY(180deg) ; -ms-transform : rotationY(180deg) ; -o-transformation : rotationY(180deg) ;

Au survol, nos cartes tourneront, les angles de leurs côtés passeront de 0 à 180 degrés et de 180 degrés à 0 :

/* la face avant est placée au-dessus de la face arrière */ .flip-container:hover .front ( transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); - ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); /* inverse, côté initialement caché */ .flip-container:hover .back ( -webkit-transform: rotateY(0deg); -moz- transformation: rotation Y (0deg); -ms-transform: rotation Y (0deg); -o-transform: rotation Y (0deg);

Nous sommes sur le point de terminer notre travail. Il ne reste plus qu'à indiquer au navigateur comment les éléments enfants doivent être affichés dans l'espace 3D. Cette propriété doit être utilisée conjointement avec la propriété transform et est appelée transform-style . Cette propriété doit être appliquée à un bloc avec la classe .flipper , et non à .back et .front , sinon nous aurons une mauvaise surprise dans le navigateur Opera.

Flipper ( -webkit-transform-style : préserver-3d ; -moz-transform-style : préserver-3d ; -ms-transform-style : préserver-3d ; -o-transform-style : préserver-3d ; style de transformation : préserver-3d)

Hourra, nous l'avons fait. Nous venons d'apprendre à effectuer une rotation en utilisant CSS. Le meilleur, c’est que tous les navigateurs modernes le prennent en charge. Oui, oui, les utilisateurs d'Internet Explorer peuvent également voir cette beauté à partir de la version 10. Malheureusement, en Russie, il existe une pratique vicieuse consistant à traîner une série d'IE8 et IE9 obsolètes. Mon client souhaitait donc qu'une info-bulle soit affichée dans les anciens navigateurs au moment du survol. Voyons ce que nous pouvons faire.

La première chose qui vient à l’esprit est d’utiliser la directive @supports. On pourrait écrire :

@supports (transform-style :preserve-3d) ou (-moz-transform-style :preserve-3d) ou (-webkit-transform-style :preserve-3d) ( /* styles pour les navigateurs prenant en charge */ /* 3D transforme */ )

Malheureusement, même IE 11 n’en sait rien, nous allons donc utiliser la méthode à l’ancienne :

Dans le fichier ie.css, nous décrirons les styles nécessaires à notre info-bulle. Je ne le présenterai pas ici, car... cela dépasse le cadre de cet article (et il n’y a rien d’intéressant là-dedans). Si vous le souhaitez, vous pouvez le voir dans notre exemple de rotation verticale utilisant CSS. Mais que se passe-t-il si la rotation horizontale nous intéresse ? Dans ce cas, notre code est transformé comme ceci :

Vertical.flip-container ( position : relative ; ) .vertical.flip-container .flipper ( -webkit-transform-origin : 100 % 213,5 px ; -moz-transform-origin : 100 % 213,5 px ; -ms-transform-origin : 100 % 213,5 px ; origine de la transformation : 100 % 213,5 px ; .vertical.flip-container:hover .back, .vertical.flip-container.hover .back ( -webkit-transform : rotateX(0deg); -moz - transformer: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transformation: rotateX(0deg); .vertical.flip-container.hover .front ( -webkit-transform : rotationX(180deg); -moz-transform : rotationX(180deg); -o-transform : rotationX(180deg); -ms-transform : rotationX(180deg) ; transformation : rotationX(180deg);