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.

Comment utiliser la méthode rotate3d en css3

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, qui peut être une valeur comprise entre 0 et 1, représentant le vecteur de la direction des coordonnées X de l'axe de rotation.

• y, qui peut être une valeur comprise entre 0 et 1, représentant le vecteur de la direction des coordonnées Y de l'axe de rotation.

• z, qui peut être une valeur comprise entre 0 et 1, représentant le vecteur de la direction des coordonnées Z de l'axe de rotation.

• un type , indiquant l'angle de rotation. Les valeurs d'angle positives représentent une rotation dans le sens des aiguilles d'une montre et les valeurs négatives représentent une rotation dans le sens inverse des aiguilles d'une montre.

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!