Maison >interface Web >tutoriel CSS >Quel est le code flip pour les éléments CSS3

Quel est le code flip pour les éléments CSS3

WBOYoriginal: 2021-12-15 11:57:401727parcourir

Code : 1. "transform:rotateY(angle)", vous pouvez définir le style de retournement de l'élément le long de l'axe Y ; 2. "transform:rotateX(angle)", vous pouvez définir le style de retournement de l'élément le long de l'axe Y ; l'axe X ; 3. "transform:rotateZ (angle)", vous pouvez définir le style de retournement de l'élément le long de l'axe Z.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quel est le flip code des éléments CSS3

En CSS, si vous souhaitez obtenir l'effet flip des éléments, vous devez utiliser l'attribut transform.

L'attribut de transformation produira différents effets d'affichage inversé lorsqu'il est utilisé avec différentes fonctions.

1. Utilisez l'attribut transform avec la fonction rotateY() pour que l'élément bascule le long de l'axe Y.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
  transform:rotateY(180deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="Quel est le code flip pour les éléments CSS3" >
<p>上面是沿着Y轴翻转180度，下面是原图</p>
<img  src="1118.02.png" alt="Quel est le code flip pour les éléments CSS3" >
</body>
</html>

Résultat de sortie :

Quel est le code flip pour les éléments CSS3

2. L'attribut transform coopère avec la fonction rotateX() pour définir l'élément à retourner le long de l'axe X.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
  transform:rotateX(180deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="Quel est le code flip pour les éléments CSS3" >
<p>上面是沿着X轴翻转180度，下面是原图</p>
<img  src="1118.02.png" alt="Quel est le code flip pour les éléments CSS3" >
</body>
</html>

Résultat de sortie :

Quel est le code flip pour les éléments CSS3

3. L'attribut transform coopère avec la fonction rotateZ() pour définir l'élément à retourner le long de l'axe Z.

L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.img1{
  transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="Quel est le code flip pour les éléments CSS3" >
<p>上面是沿着X轴翻转180度，下面是原图</p>
<img  src="1118.02.png" alt="Quel est le code flip pour les éléments CSS3" >
</body>
</html>

Résultat de sortie :

Quel est le code flip pour les éléments CSS3

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 transform

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment supprimer le curseur d'entrée en CSS3Article suivant：Comment supprimer le curseur d'entrée en CSS3

Articles Liés

Voir plus