effet de rotation CSS

L'effet de rotation CSS est un effet couramment utilisé dans le développement Web, qui peut ajouter du dynamisme et de la beauté aux pages Web. Cet article présentera des connaissances pertinentes sur l'utilisation de l'attribut transform en CSS pour obtenir des effets de rotation.

1. Présentation de l'attribut transform

L'attribut transform en CSS3 est utilisé pour transformer des éléments HTML, y compris des opérations telles que le déplacement, la mise à l'échelle, la rotation et le biseautage. Utilisez différents paramètres pour obtenir une variété d'effets de transformation. L'attribut transform doit être préfixé pour être compatible avec tous les navigateurs, tels que : -webkit-transform, -moz-transform, -o-transform, transform. Parmi eux, -webkit-transform est le préfixe défini pour s'adapter au navigateur du noyau Webkit.

2. Implémentation de l'effet de rotation

L'attribut de transformation peut être contrôlé via des fonctions de transformation telles que la matrice, la translation, la mise à l'échelle, la rotation et l'inclinaison. Cet article se concentrera sur le. utilisation de la fonction rotation.

1. Unité de rotation

L'unité de rotation en CSS peut être exprimée en angle ou en radian, et l'angle est généralement utilisé comme unité de rotation. L'angle est mesuré en degrés, vous pouvez donc exprimer numériquement l'angle de rotation. Par exemple, une rotation de 45 degrés peut être obtenue en utilisant rotate(45deg). De plus, les radians en CSS sont mesurés en rad, et 1rad équivaut à 180°/π≈57,3 degrés.

2. Réaliser la rotation

L'effet de rotation est obtenu grâce à la fonction de rotation, qui nécessite un paramètre indiquant l'angle de rotation. Dans le même temps, cette fonction peut être utilisée en combinaison avec d'autres fonctions de transformation pour obtenir des effets de transformation complexes.

Ce qui suit est un exemple de code pour obtenir l'effet de rotation :

c9ccee2e6ea535a969eb3f532ad9fe89
.rotate {

-webkit-transform: rotate(45deg); /* Webkit内核浏览器 */
-moz-transform: rotate(45deg); /* Mozilla Firefox 浏览器 */
-o-transform: rotate(45deg); /* Opera 浏览器 */
transform: rotate(45deg); /* 标准语法 */

}# 🎜🎜# 531ac245ce3e4fe3d50054a55f265927
41f4583e9f567ac77c0973b98d0bbcc9Bonjour tout le monde !16b28748ea4df4d9c2150843fecfba68

Dans le code ci-dessus, l'élément div subit une rotation de 45 degrés, le nom de la classe L'effet de rotation du navigateur du noyau Webkit, du navigateur Mozilla Firefox et du navigateur Opera est défini pour le style de rotation, et le style de transformation de la syntaxe standard est également ajouté pour garantir la compatibilité du navigateur.

Obtenir un effet de rotation 3D

En plus de l'effet de rotation bidimensionnel, l'attribut de transformation peut également obtenir un effet de rotation 3D. Afin d'obtenir un effet de rotation 3D, vous devez utiliser trois paramètres de la fonction de rotation : le premier paramètre est l'angle de rotation, le deuxième paramètre est l'axe de rotation et le troisième paramètre est l'effet de perspective de rotation.

Ce qui suit est un exemple de code pour obtenir un effet de rotation 3D :

c9ccee2e6ea535a969eb3f532ad9fe89

.rotate3d {

-webkit-transform: rotate3d(1,1,0,45deg); /* Webkit内核浏览器 */
-moz-transform: rotate3d(1,1,0,45deg); /* Mozilla Firefox 浏览器 */
-o-transform: rotate3d(1,1,0,45deg); /* Opera 浏览器 */
transform: rotate3d(1,1,0,45deg); /* 标准语法 */

} #🎜🎜 #531ac245ce3e4fe3d50054a55f265927

8dd8a8157466663a142f78f7451d0196Bonjour tout le monde !16b28748ea4df4d9c2150843fecfba68

Dans le code ci-dessus, l'élément div implémente le packaging (1, 1,0) Effet de rotation 3D avec rotation de l'axe de 45 degrés, tous les préfixes du navigateur sont également ajoutés pour des raisons de compatibilité.

3. Résumé

Grâce à la fonction de rotation de l'attribut de transformation, nous pouvons obtenir l'effet de rotation des éléments de la page Web et également obtenir l'effet de rotation 3D. Une utilisation appropriée de ces méthodes peut rendre les éléments de nos pages Web plus vivants et dynamiques.

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!