Les transformations CSS modifient la position, la taille et l'orientation des éléments sans affecter le flux des documents. La rotation, la mise à l'échelle, la traduction et l'inclinaison peuvent être combinées dans une seule propriété de transformation et s'animent en douceur avec les transitions CSS.
Faites glisser les curseurs pour voir chaque transformation appliquée en temps réel. Le rectangle en pointillés montre la position d'origine tandis que la carte pleine montre le résultat transformé. Copiez la valeur de transformation complète lorsque vous êtes satisfait.
Frequently Asked Questions
Q: Quelle est la différence entre traduire et positionner ?
Quelle est la différence entre traduire et positionner ? Translate déplace un élément visuellement sans modifier le flux de mise en page. La position (en haut/à gauche) supprime l'élément du flux ou décale les frères et sœurs. Translate est également accéléré par GPU et plus rapide à animer.
Q: La transformation affecte-t-elle la mise en page ?
La transformation affecte-t-elle la mise en page ? Les éléments transformés conservent leur espace d'origine dans le flux de documents, les chevauchements et les débordements sont donc courants : utilisez des marges ou un remplissage pour réserver de l'espace.
Q: Puis-je combiner plusieurs transformations ?
Puis-je combiner plusieurs transformations ? Oui, répertoriez-les séparés par des espaces dans une seule propriété : transform: translateX(10px) rotate(45deg) scale(1.2); Ils s'appliquent de droite à gauche dans le système de coordonnées.
Q: Pourquoi mon élément pivoté est-il flou ?
Pourquoi mon élément pivoté est-il flou ? Les rotations à des angles autres que 90 degrés provoquent des artefacts d'anticrénelage. L'ajout d'une petite échelle (1,001) ou l'utilisation de will-change: transform peut être utile dans certains navigateurs.
Q: La transformation fonctionne-t-elle avec l'animation ?
La transformation fonctionne-t-elle avec l'animation ? Oui, la transformation est l’une des propriétés les moins chères à animer. Associez-le à des @keyframes ou à des transitions : la composition GPU rend le tout fluide, même sur mobile.
Couleurs de France
Du bleu de France au rouge coquelicot, la palette française puise dans la mode, l'art et le patrimoine. Des couleurs élégantes et raffinées qui ont marqué l'histoire du design mondial.
Bleu de France #318CE7Le bleu national utilisé depuis les rois capétiens
Rouge Coquelicot #FF3800Le rouge éclatant des champs de coquelicots
Vert Émeraude #50C878La couleur emblématique des bijoux et de la joaillerie
Jaune de Naples #FADA5EPigment historique des peintres depuis la Renaissance
Rose Bonbon #F9429ELe rose sucré de la confiserie et de la mode
Bleu Roi #4169E1Le bleu royal des armoiries et de Versailles
Bordeaux #800020Le rouge sombre des vins de la région bordelaise
Gris Perle #B0B7C3L'élégance discrète des intérieurs parisiens
Lavande #967BB6Les champs de Provence en été
Crème #FFFDD0La douceur des façades haussmanniennes
Q: Qu'est-ce que le bleu de France ?
Qu'est-ce que le bleu de France ? Le bleu de France (#318CE7) est la couleur nationale française, héritée du bleu des armoiries royales depuis le XIIe siècle, reprise aujourd'hui par les équipes sportives nationales.
Q: Qu'est-ce que le rouge coquelicot ?
Qu'est-ce que le rouge coquelicot ? Le coquelicot (#FF3800) est un rouge-orangé vif nommé d'après les fleurs de coquelicot qui fleurissent dans les champs français, popularisé par les impressionnistes.