Comment déplacer, tourner, échelle et biaiser les éléments dans CSS?

Les concepteurs de sites Web souhaitent souvent faire des choses intéressantes avec les éléments apparaissant sur leur site Web pour rendre leur conception Web accrocheur. La propriété de transformation CSS vous permet de déplacer, de tourner, d'échelle et de biaiser les éléments le long des axes x et y ou le long des axes x, y et z. Cette propriété se compose de certaines méthodes qui vous permettent d'effectuer ces tâches facilement. Ces méthodes sont largement classées en deux groupes qui sont les suivants.

1. Méthodes de transformation 2D
2. Méthodes de transformation 3D

Apprenons-les en détail.

Méthodes de transformation 2D

Pour déplacer, faire tourner, mettre à l'échelle et asymer les éléments le long de l'axe des x, et l'axe y, CSS fournit diverses méthodes qui relèvent de la catégorie des méthodes de transformation 2D. Ici, nous avons répertorié quelques méthodes de transformation 2D de base pour vous.

1. Méthode traduire ()
2. Méthode Rotate ()
3. Méthode Scale ()
4. Méthode Skew ()
5. Matrice () Méthode

Ci-dessous, nous avons expliqué ces méthodes en détail.

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)

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

Exemple
Supposons que vous souhaitiez déplacer une image vers une certaine position en utilisant la méthode Translate (). Voici le code pertinent.

Html

Sans traduction:

Avec traduction:

Ici, nous avons créé deux éléments div et placé une image dans les deux.

CSS

.div
Largeur: 50px;
marge: 20px;

.traduire
Transform: tradlater (30px, 30px);

En plus de donner une certaine largeur et marge aux éléments div, nous appliquons la méthode tradlate () sur la deuxième image.

Sortir

L'image a été déplacée avec succès en utilisant la méthode tradlate ().

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: Rotation (Rx, Ry, degrés)

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

Exemple
Supposons que vous souhaitiez faire pivoter un récipient Div à la fois dans les aiguilles d'une montre et dans le sens anticipé dans les aiguilles d'une montre. Utilisez la méthode rotate ().

Html

Conteneur div normal.


Tourné à 30 degrés dans le sens des aiguilles d'une montre.

R
Tourné à 30 degrés dans le sens antihoraire.

Pour démontrer le fonctionnement de la méthode rotate (), trois conteneurs div ont été définis.

CSS

div
Largeur: 250px;
hauteur: 100px;
Color en arrière-plan: Rosybrown;
Border: 1px gris massif;

.dans le sens horaire
transformée: tournure (30deg);

.dans le sens antihoraire
Transformer: Rotation (-30DEG);

Dans le code ci-dessus, nous tournons le deuxième div 30 degrés dans le sens des aiguilles d'une montre et le troisième div 30 degrés dans le sens inverse dans les aiguilles d'une montre. Des valeurs négatives sont utilisées pour faire pivoter un élément dans le sens antihoraire.

Sortir

La méthode rotative fonctionne correctement.

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)

Les axes x et y sont définis par le paramètre SX et SY.

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

Html

Taille d'origine du conteneur Div
La taille du conteneur div augmente une fois et demie de sa largeur d'origine et de sa hauteur.

Nous avons simplement créé deux éléments div.

CSS

div
Largeur: 200px;
hauteur: 100px;
marge: 50px;
Color en arrière-plan: Rosybrown;
Border: 1px noir solide;

.escalader
Transformer: échelle (1.5,1.5);

Nous utilisons la méthode Scale () pour augmenter la largeur et la hauteur de l'élément une fois et demie sa largeur et sa hauteur d'origine.

Sortir

La taille du conteneur div a été mise à l'échelle en utilisant la méthode Scale ().

Méthode Skew ()

La méthode skew () biaise un élément horizontalement (le long de l'axe x) et verticalement (le long de l'axe y) basé sur les degrés spécifiés.

Syntaxe

Transformée: Skew (SX, SY)

Ou,

Transformer: Skew (SX)

Les deux dimensions sont représentées par SX et les paramètres SY.

Exemple
Supposons que vous souhaitiez fausser un élément à la fois horizontalement et verticalement, puis envisagez l'exemple ci-dessous.

Html

Conteneur div d'origine.


Ce conteneur div est biaisé de 8 degrés horizontalement et 9 degrés verticalement.

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

CSS

div
Largeur: 200px;
hauteur: 100px;
Color en arrière-plan: Rosybrown;
Border: 1px gris massif;

.biais
Transform: Skew (8deg, 9deg);

Nous faussons le deuxième récipient Div 8 degrés le long de l'axe X et 9 degrés le long de l'axe Y.

Sortir

L'élément a été biaisé avec succès.

Matrice () Méthode

Afin de traduire, tourner, mettre à l'échelle et asymétrie des éléments en une seule fois, la méthode matrice () est utilisée.

Syntaxe

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

Les valeurs des méthodes respectives peuvent être attribuées sous forme de paramètres.

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

Html

Conteneur div d'origine.


Après avoir utilisé la première méthode matrice ().


Après avoir utilisé la deuxième méthode Matrix ().

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

CSS

div
Largeur: 200px;
hauteur: 100px;
Color en arrière-plan: Rosbrown;
Border: 1px gris massif;

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

.matrix2
Transformer: matrice (1, 0, 0.4, 1, 120, 0);

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

Sortir

La méthode matrice () fonctionne correctement.

Maintenant que nous avons appris les méthodes de transformation 2D, explorons les méthodes de transformation 3D.

Méthodes de transformation 3D

Pour déplacer, faire tourner, évoluer et biaiser les éléments le long de l'axe X, de l'axe y et de l'axe z, CSS fournit diverses méthodes qui sont appelées méthodes de transformation 3D. Les méthodes fondamentales de transformation 3D sont les suivantes

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

Nous avons expliqué ces méthodes en détail ci-dessous.

Méthode traduire3d ()

La méthode utilisée pour modifier la position d'un élément le long des axes x, y et z en fonction des paramètres attribués est appelé la méthode tradlate3d ().

Syntaxe

Transform: tradlate3d (TX, TY, TZ)

Les trois dimensions sont représentées par les paramètres TX, TY et TZ.

Exemple
Supposons que vous souhaitiez changer la position d'une image le long des trois axes. Utilisez la méthode tradlate3d ().

Html

Sans traduction:

Avec traduction:

La même image a été placée dans les deux conteneurs pour démontrer l'effet avant et après la méthode Translate3d ().

CSS

.div
Largeur: 50px;
marge: 20px;

.traduire
Transform: tradlate3d (25px, 25px, 40px);

Nous utilisons la méthode tradlate3d () pour modifier la position du deuxième conteneur div.

Sortir

L'image a été traduite à l'aide de la méthode tradlate3d ().

Méthode rotate3d ()

Aux fins de rotation d'un élément dans le sens des aiguilles d'une montre ou dans le sens antihoraire le long des axes x, y et z 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écifiez l'angle à partir de laquelle l'élément doit être tourné.

Exemple
Supposons que vous souhaitiez faire pivoter une image dans l'espace 3D.

CSS

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

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

Nous tournons le deuxième conteneur DIV en spécifiant les valeurs des axes x, y et z et l'angle. Notez que nous avons également réglé la propriété Perspective sur 300px, qui définit la vue en perspective d'un élément.

Sortir

L'image a été tournée avec succès.

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 paramètres ci-dessus spécifient les trois dimensions.

Exemple
Voyons ce qui arrive à la même image utilisée dans l'exemple ci-dessus lors de l'utilisation de la méthode Scale3d ().

CSS

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

.escalader
Transformée: échelle3d (1, 1, 1) Rotate3d (1, 0, 0, 60deg);

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

La méthode SCALE3D () est vérifiée et fonctionne correctement.

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 ())

Chaque paramètre prend la valeur de la méthode respective.

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, -60deg) scale3d (1, 1, 1);

L'image est traduite, tournée et mise à l'échelle simultanément.

Sortir

L'image a été déplacée, tournée et mise à l'échelle en même temps.

Conclusion

Aux fins du déplacement, de la rotation, de la mise à l'échelle et de la biais d'un élément, il existe différentes méthodes disponibles dans CSS qui relèvent des catégories de méthodes de transformation 2D et de méthodes de transformation 3D. Les méthodes traduisent (), rotate (), scale (), skew () et matrix () sont regroupées sous les méthodes de transformation 2D de classification, en attendant, les méthodes traduisent3d (), rotate3d (), scale3d () et matrix3d ​​() se trouvent dans le groupe de méthodes de transformation 3D. Toutes ces méthodes sont expliquées en détail dans ce guide ainsi que des exemples pertinents.