Méthodes de transformation 2D dans CSS

Lors de la conception d'un site Web, il est souvent nécessaire de positionner, de faire pivoter, d'échelle ou de biaiser les éléments HTML horizontalement et verticalement pour améliorer l'opinion du site Web. À cette fin, nous pouvons utiliser la propriété CSS Transform qui nous permet de modifier la position, la taille ou la forme d'un élément. Dans CSS, il existe deux types de transformations qui sont une transformée 2D et une transformée 3D.

Dans ce guide, cependant, nous allons nous en tenir à la transformation 2D et découvrir les différentes méthodes de transformation 2D.

Méthodes de transformation 2D dans CSS

Il existe différentes méthodes de transformation 2D dans CSS qui sont les suivantes.

1. Méthode traduire ()
2. Méthode Rotate ()
3. Méthode Scale ()
4. Méthode Scalex ()
5. Méthode Scaley ()
6. Méthode Skew ()
7. Méthode skewx ()
8. Méthode Skewy ()
9. Matrice () Méthode

Ceux-ci sont expliqués en détail ci-dessous.

Méthode traduire ()

La méthode CSS tradlate () modifie la position d'un élément le long de l'axe x (horizontalement) ou le long de l'axe y (verticalement) en fonction des paramètres attribués.

Syntaxe

Transform: tradlater (TX, TY)

Ou,

Transform: tradlater (TX)

Le TX et Ty se réfèrent aux axes x et y.

Exemple
Supposons que vous souhaitiez déplacer une image vers une certaine position à l'aide de la méthode Translate (), puis suivez l'exemple ci-dessous.

Html

CSS

img
Largeur: 250px;
hauteur: 100px;
transformée: traduire (50px, 50px);

Sortir
Sans tradlate () méthode.

Avec la méthode tradlate ().

La méthode tradlate () a traduit l'image 50px du haut et du 5-px du côté gauche avec succès.

Méthode Rotate ()

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

Syntaxe

Transformer: tourner (degrés)

Le paramètre degrés définit l'angle à partir de laquelle l'élément doit être tourné.

Exemple
Considérez l'exemple ci-dessous pour comprendre le fonctionnement de la méthode rotate ().

Html

C'est un conteneur div normal.


Ce conteneur div est tourné à 25 degrés dans le sens des aiguilles d'une montre.


Ce conteneur div est tourné à 25 degrés dans le sens antihoraire.

Ici, nous avons spécifié trois conteneurs Div pour démontrer le concept de la méthode rotate ().

CSS

div
Largeur: 250px;
hauteur: 100px;
Color d'arrière-plan: bisque;
Border: 1px gris massif;

.dans le sens horaire
transformée: rotation (25deg);

.dans le sens antihoraire
transformée: rotation (-25deg);

Dans le code ci-dessus, nous donnons d'abord de la largeur, de la hauteur, de la couleur d'arrière-plan et de la bordure aux conteneurs div. Ensuite, nous tournons le deuxième div 25 degrés dans le sens des aiguilles d'une montre et le troisième div 25 degrés dans les aiguilles d'une montre dans les aiguilles d'une montre. Notez que pour faire pivoter les aiguilles de montre, nous utilisons des valeurs négatives.

Sortir

La méthode rotate () a été mise en œuvre et vérifiée.

Méthode Scale ()

Afin d'améliorer ou de réduire la taille d'un élément basé sur la largeur spécifiée et la hauteur, la méthode d'échelle () est utilisée.

Syntaxe

Transformer: échelle (SX, SY)

Ou,

Transformer: échelle (SX)

Les SX et SY représentent respectivement les dimensions horizontales et verticales.

Exemple
L'exemple ci-dessous démontre le fonctionnement de la méthode Scale ().

Html

La taille du conteneur Div augmente deux fois de sa largeur d'origine et de sa hauteur.

Dans le code ci-dessus, nous avons simplement créé un élément div.

CSS

div
Largeur: 200px;
hauteur: 100px;
marge: 130px;
Color d'arrière-plan: bisque;
Border: 1px noir solide;
transformée: échelle (2,2);

En utilisant les propriétés CSS, nous attribuons une certaine largeur, hauteur et marge à l'élément div et enfin nous utilisons la méthode Scale () pour augmenter la largeur et la hauteur de l'élément deux fois sa largeur et sa hauteur d'origine.

Sortir

La taille du conteneur div a été augmentée en utilisant la méthode Scale ().

Méthode Scalex ()

Dans le but de modifier la largeur d'un élément, la méthode ScaleX () est utilisée.

Syntaxe

Transform: Scalex (SX)

Le paramètre SX représente la dimension horizontale d'un élément.

Exemple
Disons que vous souhaitez diminuer la largeur d'un élément puis consulter l'exemple ci-dessous.

CSS

div
Transform: Scalex (0.5);

Dans le code ci-dessus, nous utilisons la méthode Scalex () pour diminuer la largeur d'un conteneur div.

Sortir

La méthode ScaleX () fonctionne correctement.

Méthode Scaley ()

Dans le but de modifier la hauteur d'un élément, la méthode Scaley () est utilisée.

Syntaxe

Transformer: Scaley (SY)

Le paramètre SY définit la valeur de l'axe y.

Exemple

Considérez l'exemple ci-dessous.

CSS

div
transformée: échelle (2);

Ici, nous utilisons la méthode Scaley () pour augmenter la hauteur de l'élément div.

Sortir

La hauteur de l'élément div a augmenté deux fois sa hauteur d'origine.

Méthode Skew ()

Cette méthode fausse un élément horizontalement et verticalement en fonction des degrés spécifiés.

Syntaxe

Transformée: Skew (SX, SY)

Ou,

Transformer: Skew (SX)

Le SX et SY représentent les axes x et y.

Exemple
Supposons que vous souhaitiez fausser un élément le long des axes x et y…

Html

C'est un conteneur div normal.


Ce conteneur div est biaisé de 10 degrés horizontalement et 15 degrés verticalement.

Ici, nous avons défini deux conteneurs Div pour démontrer le fonctionnement de la méthode Skew ().

CSS

div
Largeur: 200px;
hauteur: 100px;
Color d'arrière-plan: bisque;
Border: 1px gris massif;

.biais
Transform: Skew (10deg, 15deg);

En plus de styliser les conteneurs DIV, nous fautrons le deuxième conteneur Div 10 degrés le long de l'axe X et de 15 degrés le long de l'axe Y.

Sortir

Le conteneur Div a été biaisé horizontalement et verticalement.

Méthode skewx ()

Afin de fausser un élément particulier horizontalement en fonction des degrés spécifiés, la méthode skewx () est utilisée.

Syntaxe

Transformer: Skew (SX)

Le paramètre SX définit l'axe X.

Exemple
Supposons que vous souhaitiez fausser un élément de 15 degrés horizontalement.

CSS

.biais
transformée: skewx (15deg);

En utilisant la méthode skewx (), nous fautrons l'élément div 15 degrés horizontalement.

Sortir

La méthode ScaleX () fonctionne correctement.

Méthode Skewy ()

Afin de fausser un élément particulier verticalement en fonction des degrés spécifiés, la méthode Skewy () est utilisée.

Syntaxe

Transformer: Sckew (SY)

Le paramètre SY définit l'axe y.

Exemple
Supposons que vous vouliez fausser un élément de 15 degrés verticalement.

CSS

.biais
Transformée: biple (15deg);

En utilisant la méthode skewx (), nous faussons l'élément div de 15 degrés verticalement.

Sortir

La méthode Scaley () fonctionne correctement.

Matrice () Méthode

Aux fins de la traduction, de la rotation, de la mise à l'échelle et des éléments de biais.

Syntaxe

Transform: Matrix (ScaleX (), Skewy (), Skewx (), Scaley (), Translatex (), Translate ())

Vous pouvez attribuer des valeurs à toutes les propriétés qui leur séparent des virgules.

Exemple

Comprenons le fonctionnement de la méthode matrice () en utilisant l'exemple suivant.

Html

C'est un conteneur div normal.


Le conteneur div après avoir utilisé la méthode matrice ().


Le conteneur div après avoir utilisé la méthode matrice ().

Pour démontrer le fonctionnement de la méthode matrice (), nous avons créé trois éléments div.

CSS

div
Largeur: 200px;
hauteur: 100px;
Color d'arrière-plan: bisque;
Border: 1px gris massif;

.matrix1
transformée: matrice (1, -0.3, 0, 1, 0, 0);

.matrix2
Transformer: matrice (1, 0, 0.5, 1, 150, 0);

Nous attribuons différentes valeurs à divers paramètres de la méthode matrice ().

Sortir

La méthode matricielle fonctionne correctement.

Conclusion

Aux fins du positionnement, de la rotation, de la mise à l'échelle ou de la biais d'éléments le long de l'axe x et y, il existe différentes méthodes de transformation 2D disponibles dans CSS. Les méthodes de transformation 2D de base dans CSS sont traduites (), rotation (), échelle (), skew () et matrice (). Chacune de ces méthodes a un objectif différent que nous avons expliqué dans cet article avec un exemple pertinent.