Autour de quel axe la rotation CSS3 tourne-t-elle ?-tutoriel CSS-php.cn

Autour de quel axe la rotation CSS3 tourne-t-elle ?

WBOY

Libérer： 2021-12-16 17:38:58

original

3348 Les gens l'ont consulté

Il existe de nombreuses situations de rotation en CSS3 : 1. La rotation réalisée par la fonction "rotateX()" se fait autour de l'axe X ; 2. La rotation réalisée par la fonction "rotateY()" se fait autour de l'axe Y ; . La fonction "rotateZ()" La rotation réalisée se fait autour de l'axe Z ; 4. La rotation réalisée par la fonction "rotate()" se fait autour de l'origine.

Autour de quel axe la rotation CSS3 tourne-t-elle ?

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

La rotation CSS3 concerne quel axe

En CSS, la rotation peut être dans le sens des aiguilles d'une montre, dans le sens inverse des aiguilles d'une montre ou autour de l'axe X, Y ou Z. Différents styles de rotation correspondent à différentes fonctions.

1. Fonction "rotate()"

Utilisez la fonction "rotate()" pour faire pivoter les éléments dans le sens des aiguilles d'une montre ou dans le sens inverse.

L'exemple est le suivant :

<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Autour de quel axe la rotation CSS3 tourne-t-elle ?

2. Fonction "rotateX()"

Utilisez la fonction "rotateX()" pour faire pivoter l'élément autour de l'axe X. L'exemple est le suivant :

<html>
<head>
<style> 
img{
transform:rotatex(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

Copier après la connexion

Résultat de sortie :

Autour de quel axe la rotation CSS3 tourne-t-elle ?

3. Fonction "rotateY()"

Utilisez la fonction "rotateY()" pour faire pivoter l'élément autour de l'axe Y. L'exemple est le suivant. suit :

<html>
<head>
<style> 
img{
transform:rotateY(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

Copier après la connexion

Résultat de sortie :

Autour de quel axe la rotation CSS3 tourne-t-elle ?

4. Fonction "rotateZ()"

Utilisez la fonction "rotateZ()" pour faire pivoter l'élément autour de l'axe Z. L'exemple est le suivant :

<html>
<head>
<style> 
img{
transform:rotateZ(180deg);
}
</style>
</head>
<body>
<img src="1118.02.png" alt="">
</body>
</html>

Copier après la connexion

Résultat de sortie :

Autour de quel axe la rotation CSS3 tourne-t-elle ?

(Partage vidéo 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!