Méthodes de transformation 3D dans CSS

Dans le but de vous assurer que votre conception Web est exceptionnelle et garantit l'expérience utilisateur dont vous avez besoin pour apprendre à définir divers éléments HTML sur votre page Web. Il y a beaucoup de choses que vous pouvez faire avec des éléments pour améliorer leur look, comme traduire, faire pivoter ou échelle des éléments dans l'espace 2D ou 3D.

CSS fournit diverses méthodes de transformation qui entrent dans la catégorie de la méthode de transformation 2D ou des méthodes de transformation 3D. Cependant, dans cet article, nous verrons les méthodes de transformation 3D dans CSS.

Méthodes de transformation 3D dans CSS

Il existe différentes méthodes de transformation 3D dans CSS; Certaines des méthodes de base sont les suivantes.

1. Méthode traduire3d ()
2. Méthode rotate3d ()
3. Méthode SCALE3D ()
4. Méthode matrix3d ​​()

Les méthodes susmentionnées sont expliquées en détail ci-dessous.

Méthode traduire3d ()

La méthode CSS tradlate3d () modifie la position d'un élément le long des axes x, y et z en fonction des paramètres attribués.

Syntaxe

Transform: tradlate3d (TX, TY, TZ)

Les paramètres TX, TY et TZ représentent les axes x, y et z.

Exemple
Supposons que vous souhaitiez modifier la position d'une image dans la dimension 3D à l'aide de la méthode Translate3D (), puis suivez l'exemple ci-dessous.

Html

Sans traduction:

Avec traduction:

Dans le code ci-dessus, nous avons créé deux éléments div et placé la même image dans les deux conteneurs pour démontrer l'effet avant et après la méthode tradlate3d ().

CSS

.div
Largeur: 200px;
hauteur: 100px;
marge: 30px;

.traduire
Transform: tradlate3d (30px, 30px, 50px);

Nous fournissons d'abord au conteneur div une largeur, une hauteur et une marge. Ensuite, nous utilisons la méthode tradlate3d () pour modifier la position du deuxième conteneur div.

Sortir

La position de l'image a été modifiée avec succès en utilisant la méthode tradlate3d ().

Méthode rotate3d ()

Aux fins de rotation d'un élément dans le sens horaire ou dans le sens antihoraire dans l'espace 3D en fonction du degré spécifié, la méthode rotate () est utilisée.

Syntaxe

Transformer: Rotate3D (Rx, Ry, RZ, degrés)

Les paramètres RX, RY et RZ définissent les trois dimensions, tandis que le paramètre degrés spécifie l'angle à partir de laquelle l'élément doit être tourné.

Exemple
Pour démontrer le fonctionnement de la méthode rotate3d (), nous allons utiliser l'exemple utilisé dans la section ci-dessus.e. Nous allons faire pivoter l'image du chien le long des axes x, y et z.

CSS

.div
Largeur: 200px;
hauteur: 100px;
marge: 30px;
Perspective: 300px;

.tourner
Transformer: Rotate3d (0, 1, 0, 45Deg);

En plus de définir la largeur, la hauteur et la marge de l'élément DIV, nous ajustons également sa perspective. La propriété en perspective définit la vue en perspective d'un élément de la dimension 3D. Enfin, nous tournons le deuxième conteneur Div en spécifiant les valeurs des axes x, y et z et l'angle.

Sortir

L'image a été tournée avec succès dans la dimension 3D.

Méthode SCALE3D ()

Afin d'améliorer ou de réduire la taille d'un élément en fonction de la largeur spécifiée et de la hauteur, la méthode Scale () est utilisée. Pour que cette méthode fonctionne, utilisez-la avec d'autres méthodes de transformation telles que Rotate et Perspective.

Syntaxe

Transform: Scale3d (SX, SY, SZ)

Les axes X, Y et Z sont représentés par les paramètres SX, SY et SZ.

Exemple
Voyons ce qui arrive à l'image du chien lors de l'utilisation de la méthode Scale3d ().

CSS

.div
Largeur: 300px;
hauteur: 80px;
marge: 30px;
Perspective: 300px;

.escalader
Transformée: échelle3d (1, 1, 1) Rotate3d (1, 0, 0, 45Deg);

Comme déjà mentionné, nous devons utiliser la méthode SCALE3D () avec d'autres méthodes pour voir son effet, par conséquent, dans le code ci-dessus, nous l'utilisons avec la méthode Rotate3D ().

Sortir

L'image du chien a été mise à l'échelle.

Méthode matrix3d ​​()

Dans le but de traduire, rotatif et d'échelle des éléments à la fois dans l'espace 3D, la méthode matricielle () est utilisée. Cette méthode rend 16 valeurs sous la forme d'une matrice 4 × 4.

Syntaxe

Transforme: Matrix3d ​​(M, M, M, M, M, M, M, M, M, M, M, M, M, M, M, M)

Ou,

Transform: matrix3d ​​(tradlate3d (), rotate3d (), scale3d ())

Les valeurs de différentes méthodes peuvent être affectées aux paramètres correspondants.

Exemple
Translaçons, tournons et faisons évoluer l'image du chien à la fois en utilisant la méthode matrix3d ​​().

CSS

.matrice
Transformée: tradlate3d (10px, 10px, 20px) rotate3d (0, 1, 0, -45deg) scale3d (1, 1, 1);

Nous nous déplaçons, tournons et écartons l'image en même temps.

Sortir

La méthode matrix3d ​​() fonctionne correctement.

D'autres méthodes de transformation 3D ont été expliquées dans le tableau suivant.

Méthode	Description
Méthode Translatex (x)	Modifie la position d'un élément le long de l'axe x.
Méthode traduisé (y)	Modifie la position d'un élément le long de l'axe y
Méthode Translatez (Z)	Modifie la position d'un élément le long de l'axe z
Méthode Rotatex (x)	Tourne un élément le long de l'axe x.
Méthode Rotatey (Y)	Tourne un élément à travers l'axe y.
Méthode Rotatez (Z)	Tourne un élément le long de l'axe z.
Méthode Scalex (x)	Échelle l'élément à travers l'axe X.
Méthode Scaley (Y)	Échelle l'élément à travers l'axe Y.
Méthode Scalez (z)	Échelle un élément le long de l'axe Z.
Perspective (n) Méthode	Il définit la vue en perspective d'un élément dans l'espace 3D.

Conclusion

Afin de positionner, de tourner et d'échouer les éléments le long des axes x, y et z, il existe différentes méthodes de transformation 3D disponibles dans CSS. Les méthodes de transformation 3D de base dans CSS sont traduire3d (), scale3d (), rotate3d () et matrix3d ​​(). La méthode Translate3D () est utilisée pour modifier la position d'un élément, la méthode rotate3d () est utilisée pour faire tourner un élément dans la dimension 3D, la méthode Scale3D () est utilisée pour modifier la taille d'un élément et Matrix3D () La méthode est utilisée pour effectuer toutes ces tâches à la fois. Toutes ces méthodes sont expliquées en profondeur ainsi que des exemples pertinents dans ce guide.