Flip d'image d'arrière-plan CSS
Dans ce guide, nous ferons toutes ces techniques de retournement en utilisant les propriétés CSS. Ici, nous découvrirons le flip d'image dans CSS en utilisant différentes propriétés.
Exemple 1:
Pour retourner l'image dans CSS, nous devons avoir le code HTML où nous ajoutons l'image. Ensuite, nous créons un fichier CSS pour appliquer les propriétés afin que notre image retourne. Nous pouvons retourner notre image dans n'importe quelle direction de notre choix. Nous avons le code Visual Studio où nous devons effectuer ces exemples. Ainsi, nous ouvrons le fichier et sélectionnons la langue comme «HTML» et créons ce fichier HTML. Ensuite, nous devons faire du code ici qui est donné dans l'image suivante. Lorsque nous terminons ce code, nous devons l'enregistrer.
Pour afficher le titre en haut de la page, nous ajoutons le «
" étiqueter. Ensuite, nous avons un paragraphe, et ce paragraphe est affiché à côté de la tête. Après cela, nous faisons le code principal qui ajoute le code d'image. Nous ajoutons l'image après le titre et le paragraphe. Nous utilisons la balise «» et dans son «SRC». Nous donnons le chemin ou le nom de l'image que nous voulons ajouter. Nous avons réglé sa valeur de largeur sur «400» et sa valeur de hauteur sur «300». Nous définissons également cette largeur et cette hauteur dans notre fichier CSS. Maintenant, nous nous déplacons pour créer notre fichier CSS dans lequel nous utilisons les différentes propriétés pour faire de notre image une image de retournement.
Nous utilisons le sélecteur d'image «Hover». Il est utilisé pour sélectionner l'image lorsque le curseur se déplace sur l'image. La «transformation Webkit» est la propriété CSS qui est utilisée pour transformer l'image en 2-D et 3-D. Nous pouvons faire pivoter notre image en utilisant ceci. Le «scalex» est utilisé pour faire pivoter l'image dans la direction horizontale. Ce code fera pivoter l'image horizontalement lorsque nous déplacerons le curseur sur cette image.
Ceci est l'image d'origine avant de déplacer le curseur sur l'image. Lorsque nous survons sur cette image, il tourne dans la direction horizontale.
L'image tournée est également indiquée dans ce qui suit:
Ici, vous pouvez voir que l'image tourne horizontalement. L'image précédente est l'image tournée après avoir déplacé le curseur sur l'image.
Exemple n ° 2:
Ceci est le fichier html. Vous pouvez voir que nous avons ajouté une image ici dans ce code. Nous avons utilisé la «maison.Png ”Image dans cet exemple.
Nous définissons l'image «largeur» sur «500px» et l'image «hauteur» sur «400px». Après cela, nous avons une image «survol» qui «transforme» l'image sur l'axe horizontal lorsque le curseur plane sur cette image.
Sortir:
L'image précédente est l'image d'origine avant la transformation sur l'axe horizontal. L'image suivante est l'image après la transformation lorsque nous déplaçons le curseur sur l'image. Vous pouvez facilement voir la différence entre l'image précédente et l'image donnée suivante.
Exemple # 3:
Ici, les valeurs «largeur» et «hauteur» sont les mêmes, et l'image est la même. Mais nous faisons pivoter l'image verticalement après avoir plané sur l'image. Ainsi, nous utilisons la «transformation» et la définissons sur «Scaley (-1)» afin qu'elle tourne notre image dans la direction verticale.
Maintenant, voyez que l'image tourne dans le sens vertical lorsque nous survons sur cette image. Ici, l'image est montrée dans une direction à l'envers qui tourne verticalement après avoir plané sur ce.
Exemple n ° 4:
Dans ce code, nous utilisons les deux valeurs dans «l'échelle». Nous utilisons la «transformation». Dans son «échelle», nous passons les deux valeurs «-1, -1» qui tourne l'image dans les directions verticales et horizontales. Lorsque nous déplaçons la souris sur cette image, elle tourne dans les deux sens.
Voir que l'image est tournée à la fois sur l'axe vertical et horizontal lorsque nous le survons. L'image précédente est l'image après avoir survolé l'image d'origine.
Exemple n ° 5:
Cet exemple est différent des exemples précédents. Nous créons les différentes classes DIV en utilisant les différents noms. La première classe DIV est nommée «Flip-Box». La deuxième classe DIV est nomme le "flip-box-inner". Et la troisième classe DIV est nommée "Flip-Box-front". Après avoir défini toutes ces classes Div, nous avons mis une image nommée «Myimage.JPEG ". Nous créons ensuite un autre «div» avec un nom «flip-box-back». Maintenant, nous écrivons quelques paragraphes dans cette div. Nous utilisons toutes ces classes Div dans notre fichier CSS.
Nous utilisons le «corps» et la «Font-Family» pour «Arial». Ensuite, nous définissons la largeur et la hauteur du conteneur «Flip Box» sur «600px» et «400px», respectivement. Maintenant, nous ajoutons la «bordure» et la fixons sur «1px» dans sa largeur avec un type «solide» afin que nous puissions montrer que lorsque cette image se retourne, elle sort de la boîte lorsque nous déplaçons le curseur dessus. Nous ajoutons la «perspective» et la définissons sur «1000px». Nous l'utilisons lorsque nous devons ajouter un effet tridimensionnel à l'image.
Maintenant, nous avons un autre conteneur qui est un "flip-box-inner". Ce conteneur définit la position de l'avant et de l'arrière de l'image. Nous définissons la «position» sur «relative», et la «largeur» et la «hauteur» à «100px». Nous utilisons la propriété «transition» pour contrôler la vitesse d'animation et la définir sur «0.8s ”.
Après cela, nous utilisons le «style transformant» pour rendre l'image dans l'espace tridimensionnel. Nous l'avons mis sur «Preserve-3D». Ensuite, nous avons un volant «flip-box», donc lorsque nous survons l'image, il se déplacera dans la direction horizontale car nous utilisons la «transformée» en «rotation» et la définira sur «180deg». Nous avons le «flip-box-front» et «flip-box-back». Ensuite, nous donnons la position aux deux ici. Nous définissons la «position» pour les deux à «absolue». La «hauteur» et la «largeur» pour les deux conteneurs sont définies sur «100px» et «100px», respectivement. Nous avons également défini le «Webkit-Backface-Visibility» sur «Hidden». Cette propriété est utilisée lorsque nous tournons l'image et la définissons ici si l'utilisateur verra la face arrière de l'image ou non.
Donc, ici, nous le cachons en utilisant la balise «cachée» avec cette propriété. Maintenant, nous stylissons la face avant en utilisant un conteneur «flip-box-front». Nous définissons le «fond d'arrière-plan» sur «#bbb» et la «couleur» de la police ou du texte sur «noir». Enfin, nous stylissons l'arrière de l'image en utilisant la "Box-back". Son «Color en arrière-plan» est défini sur «gris», et la police «couleur» est définie sur «blanc». Nous utilisons la propriété «Transformer» et définissons sa valeur sur «Rotatey (180deg)».
Dans la sortie, nous avons les multiples images dans lesquelles vous pouvez remarquer la rotation de l'image. Dans la dernière image, l'arrière de l'image est également affiché ici. Vous pouvez voir comment il tourne lorsque nous survons cette image. Tout le texte que nous avons écrit dans le code HTML apparaîtra à l'arrière de l'image lorsque cette image tourne après avoir plané.
Conclusion
Dans ce guide, nous avons utilisé le concept d'image Flip dans CSS. Nous avons effectué les différents exemples d'intersection ici. Nous avons renversé notre image dans la direction verticale ou dans la direction horizontale ou dans les deux directions après avoir plané. Nous avons également effectué un exemple dans lequel nous tournons notre image à 180 degrés lorsque nous survons sur l'image. Nous avons utilisé les propriétés CSS dans tous les exemples et rendu toutes les sorties de ce guide. Vous verrez comment l'image se retourne ou tourne verticalement et horizontalement.