Comment travailler avec le CSStransform
biens
Les transformations vous permettent de traduire, faire pivoter, mettre à l'échelle et incliner des éléments, dans l'espace 2D ou 3D. Ils sont une fonctionnalité CSS très cool, surtout lorsqu'ils sont combinés avec des animations.
Transformations 2D
Letransform
property accepte ces fonctions:
translate()
pour déplacer des élémentsrotate()
faire pivoter des élémentsscale()
mettre à l'échelle des éléments en tailleskew()
pour tordre ou incliner un élémentmatrix()
un moyen d'effectuer l'une des opérations ci-dessus en utilisant une matrice de 6 éléments, une syntaxe moins conviviale mais moins verbeuse
Nous avons également des fonctions spécifiques aux axes:
translateX()
pour déplacer des éléments sur l'axe XtranslateY()
pour déplacer des éléments sur l'axe YscaleX()
pour mettre à l'échelle des éléments en taille sur l'axe XscaleY()
pour mettre à l'échelle des éléments en taille sur l'axe YskewX()
pour tordre ou incliner un élément sur l'axe XskewY()
pour tordre ou incliner un élément sur l'axe Y
Voici un exemple de transformation qui change le.box
la largeur de l'élément par 2 (en le dupliquant) et la hauteur par 0,5 (en la réduisant de moitié):
.box {
transform: scale(2, 0.5);
}
transform-origin
permet de définir l'origine (le(0, 0)
coordonnées) pour la transformation, nous permettant de changer le centre de rotation.
Combinaison de plusieurs transformations
Vous pouvez combiner plusieurs transformations en séparant chaque fonction par un espace.
Par exemple:
transform: rotateY(20deg) scaleX(3) translateY(100px);
Transforme 3D
Nous pouvons aller plus loin et déplacer nos éléments dans un espace 3D plutôt que sur un espace 2D. Avec la 3D, nous ajoutons un autre axe, Z, qui ajoute de la profondeur aux visuels.
En utilisant leperspective
propriété, vous pouvez spécifier la distance entre l'objet 3D et la visionneuse.
Exemple:
.3Delement {
perspective: 100px;
}
perspective-origin
détermine l'apparence de la position du spectateur, comment le regardons-nous sur les axes X et Y.
Nous pouvons maintenant utiliser des fonctions supplémentaires qui contrôlent l'axe Z, qui s'ajoutent aux autres transformations des axes X et Y:
translateZ()
rotateZ()
scaleZ()
et les raccourcis correspondantstranslate3d()
,rotate3d()
etscale3d()
comme raccourcis pour utiliser letranslateX()
,translateY()
ettranslateZ()
fonctions et ainsi de suite.
Téléchargez mon gratuitManuel CSS
Plus de didacticiels CSS:
- Le guide Flexbox
- Tutoriel CSS Grid
- Variables CSS (propriétés personnalisées)
- Introduction à PostCSS
- La propriété CSS margin
- Comment centrer un élément avec CSS
- Polices système CSS
- Comment imprimer votre HTML avec style
- Un guide d'introduction aux transitions CSS
- Un didacticiel sur les animations CSS
- Introduction au CSS
- Le guide CSS
- Comment configurer Tailwind avec PurgeCSS et PostCSS
- La feuille de triche de Tailwind
- Comment faire pivoter en continu une image en utilisant CSS
- Rendre un tableau réactif en utilisant CSS
- Comment déboguer CSS en divisant en deux
- Sélecteurs CSS
- Cascade CSS
- Spécificité CSS
- Sélecteurs d'attributs CSS
- Couleurs CSS
- Unités CSS
- URL CSS ()
- Typographie CSS
- Le modèle CSS Box
- La propriété de position CSS
- Requêtes multimédias CSS et conception réactive
- Requêtes de fonctionnalités CSS
- Transformations CSS
- Comment styliser des listes en utilisant CSS
- Préfixes de fournisseur CSS
- Héritage CSS
- Pseudo-classes CSS
- Pseudo éléments CSS
- Styliser les tableaux HTML avec CSS
- La propriété d'affichage CSS
- La fonction CSS calc ()
- Bordures CSS
- Importer un fichier CSS avec @import
- Gestion des erreurs CSS
- Filtres CSS
- Dimensionnement de la boîte CSS
- Arrière-plans CSS
- Commentaires CSS
- Polices CSS
- Remplissage CSS
- La propriété CSS float et la compensation
- Normalisation CSS
- La propriété CSS z-index
- Comment désactiver la sélection de texte à l'aide de CSS
- Comment mettre un élément au bas de son conteneur en utilisant CSS
- Comment inverser les couleurs en utilisant CSS
- Balises pré réactives en CSS
- Intégrations de vidéos YouTube réactives
- Quelles sont les bonnes valeurs CSS Breakpoint pour le Responsive Design?
- Comment aligner le centre dans Flexbox