Maison > Article > interface Web > Comment utiliser la méthode rotate3d en CSS3
En CSS3, la méthode rotate3d() est utilisée pour définir la transformation 3D d'un élément. Elle déplace l'élément autour d'un axe fixe sans le déformer. L'ampleur du mouvement est définie par l'angle spécifié ; un nombre positif, l'élément se déplacera dans le sens des aiguilles d'une montre. Mouvement Si le paramètre est défini sur un nombre négatif, l'élément se déplacera dans le sens inverse des aiguilles d'une montre. La syntaxe est "transform:rotate3d(x,y,z,angle)".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
rotate3d() La fonction CSS définit une transformation qui déplace l'élément autour d'un axe fixe sans le déformer. La quantité de mouvement est définie par l'angle spécifié ; s'il est positif, le mouvement se fera dans le sens des aiguilles d'une montre, s'il est négatif, il se fera dans le sens inverse des aiguilles d'une montre.
Dans l'espace 3D, la rotation a 3 dimensions libres, décrivant l'axe de rotation. L'axe de rotation est défini par un ensemble de vecteurs [x, y, z] et passe par le point d'origine de la transformation (c'est-à-dire défini via la propriété CSS transform-origin). Si ces vecteurs se voient attribuer des valeurs non standards, c'est à dire lorsque la somme des carrés des 3 valeurs de coordonnées n'est pas égale à 1, elle sera implicitement normalisée en interne. Les vecteurs non standard, tels que les valeurs nulles et [0, 0, 0], feront que la rotation n'aura aucun effet, mais n'affecteront pas les autres effets de l'ensemble de la propriété CSS (Note du traducteur : comme plusieurs transformations en transformation) .
Contrairement aux rotations planaires, les combinaisons de rotations 3D ne sont généralement pas commutatives ; cela signifie que l'ordre des valeurs définissant les règles de rotation est strictement contrôlé.
Syntaxe
rotate3d(x, y, z, a)
Valeur
type x
y
z
un type
L'exemple est le suivant :
Rotation autour de l'axe Y
HTML
<div>Normal</div> <div class="rotated">Rotated</div> Copy to Clipboard
CSS
body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } Copy to Clipboard
Effect
Rotation autour de la personnalisation axis
HTML
<div>Normal</div> <div class="rotated">Rotated</div> Copy to Clipboard
CSS
body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-color: pink; } Copy to Clipboard
Effet
(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!