Quel est le code flip pour les éléments CSS3-tutoriel CSS-php.cn

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

WBOY

Libérer： 2021-12-15 11:57:40

original

1730 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Résultat de sortie :

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