Maison > Article > interface Web > Autour de quel axe la rotation CSS3 tourne-t-elle ?

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

WBOYoriginal: 2021-12-16 17:38:583345parcourir

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.

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>

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>

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>

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>

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!

html5 css css3

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 obtenir une présentation d'images en forme d'éventail en CSS3Article suivant：Comment obtenir une présentation d'images en forme d'éventail en CSS3

Articles Liés

Voir plus