{"id":69473,"date":"2024-06-12T07:00:00","date_gmt":"2024-06-12T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=69473"},"modified":"2025-05-26T07:42:11","modified_gmt":"2025-05-26T14:42:11","slug":"apprendre-connatre-la-proprit-css-transform-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/","title":{"rendered":"Apprendre \u00e0 Conna\u00eetre la Propri\u00e9t\u00e9 CSS Transform"},"content":{"rendered":"\n<p>Tu as \u00e9crit le <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a>, ton <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> semble parfait, et ta page web a l&#8217;air superbe. Mais il manque quelque chose. Tu veux que ton site web soit vivant, qu&#8217;il ressorte vraiment.<\/p>\n\n\n<p>C&#8217;est l\u00e0 que <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/css-frameworks\/\" rel=\"noopener\">CSS transform<\/a> intervient.<\/p>\n\n\n<p>Cette fonctionnalit\u00e9 puissante te permet de d\u00e9placer, redimensionner, tourner et m\u00eame incliner les \u00e9l\u00e9ments sur ta page. C&#8217;est comme ajouter un peu de magie, rendant tes designs interactifs et dynamiques.<\/p>\n\n\n<p>Pense \u00e0 des sites web o\u00f9 tu as pu voir des images qui s&#8217;inclinent lorsque tu passes la souris dessus, un effet de zoom pour regarder de plus pr\u00e8s quelque chose, ou une ic\u00f4ne sur un bouton qui se d\u00e9place lorsque tu passes la souris dessus.<\/p>\n\n\n<p>C&#8217;est les transformations CSS qui travaillent en arri\u00e8re-plan.<\/p>\n\n\n<p>C&#8217;est une propri\u00e9t\u00e9 simple qui peut compl\u00e8tement changer la fa\u00e7on dont les utilisateurs interagissent avec ton site web. Dans ce guide, nous allons apprendre \u00e0 cr\u00e9er des effets visuels interactifs qui feront sortir ton site du lot.<\/p>\n\n\n<p>Plongeons !<\/p>\n\n\n<h2 id=\"h-understanding-the-basics-of-css-transform\" class=\"wp-block-heading\">Comprendre Les Bases De La Transformation CSS<\/h2>\n\n\n<p>Avant de plonger dans les transformations CSS, tu dois poss\u00e9der une solide base en CSS. Si tu ne connais pas d\u00e9j\u00e0 le CSS, consulte notre article de blog sur <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" rel=\"noopener\">l&#8217;apprentissage du CSS<\/a>.<\/p>\n\n\n<p>Maintenant, passons directement aux transformations CSS. Les transformations CSS te permettent de manipuler visuellement un \u00e9l\u00e9ment.<\/p>\n\n\n<p>Pense \u00e0 faire pivoter, redimensionner, incliner ou d\u00e9placer. Ces changements se produisent dans un espace 2D ou 3D, te donnant beaucoup de libert\u00e9 cr\u00e9ative.<\/p>\n\n\n<p>Voici \u00e0 quoi ressemble l&#8217;ajout d&#8217;une simple transformation CSS \u00e0 un \u00e9l\u00e9ment :<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"677\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform.webp\" alt=\"un exemple de transformation CSS simple d'un \u00e9l\u00e9ment\" class=\"wp-image-47141 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-300x127.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1024x433.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-768x325.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1536x650.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-600x254.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1200x508.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-730x309.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1460x618.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-784x332.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-1568x663.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/00_simple_css_transform-877x371.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/677;\" \/><\/figure>\n\n\n<p>Ici :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>.<code>element<\/code><\/strong> est le s\u00e9lecteur pour l&#8217;\u00e9l\u00e9ment que tu transformes.<\/li>\n\n\n\n<li><strong><code>function(value)<\/code><\/strong> t&#8217;indique la transformation sp\u00e9cifique et la quantit\u00e9 que tu souhaites.<\/li>\n\n\n<\/ul>\n\n\n<p>La propri\u00e9t\u00e9 de transformation prend en charge plusieurs fonctions, qui peuvent \u00eatre combin\u00e9es pour cr\u00e9er des transformations complexes en 2D et 3D.<\/p>\n\n\n<p>Explorons-en quelques-unes, d&#8217;accord ?<\/p>\n\n\n<h2 id=\"h2_exploring-2d-css-transformations\" class=\"wp-block-heading\">Exploration des Transformations CSS 2D<\/h2>\n\n\n<p>Les transformations CSS sont vraiment cool \u2014 elles te permettent de manipuler comment les \u00e9l\u00e9ments sont affich\u00e9s sur une page web. Pense \u00e0 cela comme d\u00e9placer des objets dans la vie r\u00e9elle, mais avec du code. Ici, nous allons examiner certaines des transformations bidimensionnelles disponibles en CSS.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9l\u00e9ments Rotatifs<\/h3>\n\n\n<p>Une des choses les plus courantes que tu peux faire avec les transformations CSS est de faire tourner des \u00e9l\u00e9ments. Supposons que tu aies un bouton qui dit <strong>Cliquez Moi<\/strong>, ou n&#8217;importe quel bouton sur ton site web. Nous pouvons utiliser la fonction <strong><code>rotate<\/code><\/strong> en CSS pour le rendre un peu plus int\u00e9ressant.<\/p>\n\n\n<p>Disons que tu as un <a href=\"https:\/\/www.dreamhost.com\/blog\/call-to-action-examples\/\" target=\"_blank\" rel=\"noopener\">bouton d&#8217;appel \u00e0 l&#8217;action sur ton site web<\/a> : <strong>Cliquez Moi<\/strong>. Voici comment tu peux utiliser <strong><code>rotate()<\/code><\/strong> pour le faire ressortir :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.cta-button {\n  transition: transform 0.3s;\n}\n\n.cta-button:hover {\n  transform: rotate(-10deg);\n}<\/code><\/pre>\n\n\n<p>Alors, que faisons-nous ici ?<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements.webp\" alt=\"Code CSS pour faire tourner la propri\u00e9t\u00e9 \u00e0 gauche, et les designs par d\u00e9faut vs. survol pour le bouton \u00ab Cliquez-moi \u00bb \u00e0 droite.\" class=\"wp-image-47143 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/01_rotating_elements-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>Nous avons sp\u00e9cifi\u00e9 que lorsque quelqu&#8217;un passe sa souris sur un bouton, il doit tourner de -10 degr\u00e9s.<\/p>\n\n\n<p>La transition de 0,3s sp\u00e9cifie combien de temps une animation doit prendre pour se compl\u00e9ter. Ainsi, au lieu de passer \u00e0 la position tourn\u00e9e d&#8217;un coup, cela prend un peu de temps pour montrer \u00e0 l&#8217;utilisateur une transition douce de l&#8217;\u00e9tat normal \u00e0 l&#8217;\u00e9tat tourn\u00e9.<\/p>\n\n\n<h3 class=\"wp-block-heading\">\u00c9l\u00e9ments de Mise \u00e0 l&#8217;\u00c9chelle<\/h3>\n\n\n<p>La fonction <strong><code>scale()<\/code><\/strong> te permet de cr\u00e9er une impression de profondeur, d&#8217;accentuation et de hi\u00e9rarchie visuelle dans tes conceptions.<\/p>\n\n\n<p>Disons que tu as quelques t\u00e9moignages de clients \u00e0 disposition ; quelque chose que tu aimerais montrer \u00e0 tes visiteurs de site.<\/p>\n\n\n<p>Maintenant, nous ne voulons pas simplement qu&#8217;ils restent l\u00e0, plats sur la page. Avec un peu de transformation CSS, tu peux les faire ressortir quand le curseur d&#8217;un utilisateur passe dessus.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.testimonial-card {\n  transition: transform 0.3s;\n}\n\n.testimonial-card:hover {\n  transform: scale(1.1);\n}<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements.webp\" alt=\"Propri\u00e9t\u00e9 d'\u00e9chelle de transformation CSS\" class=\"wp-image-47145 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/02_scaling_elements-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>Que faisons-nous ici ?<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Tout d&#8217;abord, nous ciblons chaque conteneur de t\u00e9moignage. Nous avons suppos\u00e9 la classe comme <strong><code>testimonial-card<\/code><\/strong>.<\/li>\n\n\n\n<li>La propri\u00e9t\u00e9 <strong><code>transition<\/code><\/strong> adoucit l&#8217;effet de mise \u00e0 l&#8217;\u00e9chelle sur 0,3 secondes, donc \u00e7a semble naturel.&nbsp;<\/li>\n\n\n\n<li>Lorsqu&#8217;un utilisateur passe sa souris sur une carte, elle se met \u00e0 grossir subtilement un peu (1,05 fois sa taille originale).<\/li>\n\n\n<\/ul>\n\n\n<p>Ce petit changement attire l&#8217;\u0153il de l&#8217;utilisateur et fait ressortir ce t\u00e9moignage particulier. C&#8217;est une diff\u00e9rence subtile sur la page, mais certainement remarquable.<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n<h3 class=\"wp-block-heading\">\u00c9l\u00e9ments de Distorsion<\/h3>\n\n\n<p>La torsion est une transformation qui te permet de pencher des \u00e9l\u00e9ments le long de l&#8217;axe X ou Y, cr\u00e9ant un sentiment de mouvement et de dynamisme.<\/p>\n\n\n<p>En particulier, la transformation <strong><code>skew()<\/code><\/strong> offre un moyen d&#8217;introduire un sentiment de mouvement et de dynamisme aux \u00e9l\u00e9ments de ton site web.<\/p>\n\n\n<p>Envisage une section d\u00e9di\u00e9e aux t\u00e9moignages des clients. Voici comment tu peux utiliser <strong><code>skew()<\/code><\/strong> pour les mettre en valeur :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.testimonial {\n  transition: transform 0.3s;\n}\n\n.testimonial:hover {\n  transform: skewX(-10deg);\n}<\/code><\/pre>\n\n\n<p>Lorsqu&#8217;un utilisateur passe la souris sur un t\u00e9moignage, il s&#8217;inclinera subtilement le long de l&#8217;axe X de -10 degr\u00e9s.<\/p>\n\n\n<p>Cette l\u00e9g\u00e8re inclinaison, obtenue gr\u00e2ce \u00e0 la fonction <strong><code>skewX()<\/code><\/strong> dans la propri\u00e9t\u00e9 de transformation CSS, <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noopener\">ajoute un int\u00e9r\u00eat visuel<\/a> sans \u00eatre trop distrayante.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements.webp\" alt=\"Propri\u00e9t\u00e9 de transformation CSS skew\" class=\"wp-image-47147 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/03_skewing_elements-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>Tu remarqueras \u00e9galement que nous ajoutons syst\u00e9matiquement la propri\u00e9t\u00e9 de transition en sp\u00e9cifiant le temps \u00e0 0.3s pour qu&#8217;une animation se termine.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Traduction Ou D\u00e9placement D&#8217;\u00e9l\u00e9ments<\/h3>\n\n\n<p>La traduction en <a href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/custom-web-design\/\" target=\"_blank\" rel=\"noopener\">conception web<\/a> signifie d\u00e9placer des \u00e9l\u00e9ments autour d&#8217;une page.<\/p>\n\n\n<p>Pense \u00e0 \u00e7a comme ceci : tu positionnes des \u00e9l\u00e9ments sur une grille, et tu peux les d\u00e9placer le long de l&#8217;axe X, Y, ou m\u00eame Z sans rien changer ni d\u00e9placer d&#8217;autre.<\/p>\n\n\n<p>Disons que tu as une barre de navigation sur ton site web. Tu veux qu\u2019elle r\u00e9agisse subtilement lorsque le curseur d\u2019un visiteur passe sur les \u00e9l\u00e9ments du menu.<\/p>\n\n\n<p>Avec <strong><code>translate( )<\/code><\/strong>, tu peux r\u00e9aliser cela. Voyons un peu de code pour mieux comprendre :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.menu-item {\n  transition: transform 0.2s;\n}\n\n.menu-item:hover {\n  transform: translateX(10px);\n}<\/code><\/pre>\n\n\n<p>Ce que nous avons fait ici, c&#8217;est appliquer un effet de transition simple. Maintenant, lorsque tu passes le curseur sur un <strong><code>.menu-item<\/code><\/strong>, il se d\u00e9place doucement de 10 pixels vers la droite. Sympa, non ?<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements.webp\" alt=\"Code CSS pour traduire la propri\u00e9t\u00e9 \u00e0 gauche, et les designs par d\u00e9faut vs. survol pour les boutons \u00e0 droite.\" class=\"wp-image-47149 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/04_translating_or_moving_elements-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>La beaut\u00e9 des traductions, c&#8217;est qu&#8217;elles ne se limitent pas seulement aux effets de survol. Tu peux les utiliser pour cr\u00e9er des <a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noopener\">animations d&#8217;entr\u00e9e et de sortie cool pour les \u00e9l\u00e9ments de ton site web<\/a>, d\u00e9placer des \u00e9l\u00e9ments pertinents pour des pages sp\u00e9cifiques lorsque tu es sur cette page, et bien plus encore.<\/p>\n\n\n<h2 id=\"h2_basics-of-3d-css-transformations\" class=\"wp-block-heading\">Principes De Base Des Transformations CSS 3D<\/h2>\n\n\n<p>Nous sommes d\u00e9sormais habitu\u00e9s \u00e0 d\u00e9placer les choses vers le haut, le bas, la gauche et la droite \u2014 c&#8217;est notre mouvement 2D typique.<\/p>\n\n\n<p>Toutefois, le CSS te permet de p\u00e9n\u00e9trer dans le monde des transformations 3D, o\u00f9 nous pouvons manipuler les \u00e9l\u00e9ments le long de l&#8217;axe z.<\/p>\n\n\n<p>Alors, quelles transformations 3D CSS offre-t-elle ?<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Tout d&#8217;abord, les fonctions de rotation : <strong><code>rotateX(angle)<\/code>, <code>rotateY(angle)<\/code><\/strong> et <strong><code>rotateZ(angle)<\/code><\/strong>. Pour mettre cela en perspective, <strong><code>rotateZ<\/code><\/strong> est notre roue qui tourne, <strong><code>rotateY<\/code><\/strong> est une page qui se tourne, et <strong><code>rotateX<\/code><\/strong> est un lancer de pi\u00e8ce. Elles contr\u00f4lent chacune la rotation autour de leurs axes respectifs.<\/li>\n\n\n\n<li><strong><code>translateZ(z)<\/code><\/strong> d\u00e9place, ou translate, un \u00e9l\u00e9ment le long de l&#8217;axe z. Une valeur positive le rapproche, tandis qu&#8217;une valeur n\u00e9gative l&#8217;\u00e9loigne. Pensez-y comme r\u00e9gler le zoom sur une cam\u00e9ra, en se focalisant sur diff\u00e9rentes profondeurs.<\/li>\n\n\n\n<li>La fonction <strong><code>scaleZ(z)<\/code><\/strong> vous permet de dimensionner un \u00e9l\u00e9ment le long de l&#8217;axe z. C&#8217;est comme \u00e9tirer ou comprimer un \u00e9l\u00e9ment le long d&#8217;une ligne unique. Des valeurs sup\u00e9rieures \u00e0 1 le font para\u00eetre plus proche de vous, tandis que des valeurs entre 0 et 1 le font reculer dans le fond.<\/li>\n\n\n<\/ul>\n\n\n<p>Pour cr\u00e9er un effet de transformation 3D, tu dois d\u00e9finir une perspective sur l&#8217;\u00e9l\u00e9ment parent. La propri\u00e9t\u00e9 de perspective d\u00e9termine la distance entre le spectateur et le plan <strong><code>z=0<\/code><\/strong>, affectant la mani\u00e8re dont les transformations 3D sont per\u00e7ues.<\/p>\n\n\n<p>Ajoutons quelques styles suppl\u00e9mentaires, comme la largeur, la hauteur, et <a target=\"_blank\" href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115003016152-Adjusting-colors-in-Remixer\" rel=\"noopener\">la couleur de fond<\/a> pour rendre la transition plus claire lorsque tu la regardes depuis ton \u00e9cran :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.parent {\n&nbsp; perspective: 500px;\n&nbsp; width: 200px;\n&nbsp; height: 200px;\n&nbsp; margin: 100px auto;\n}\n\n.child {\n&nbsp; width: 200px;\n&nbsp; height: 200px;\n&nbsp; background-color: blue;\n&nbsp; transform: rotateY(45deg);\n&nbsp; transition: transform 0.5s;\n}\n\n.child:hover {\n&nbsp; transform: rotateY(0deg);\n}<\/code><\/pre>\n\n\n<p><strong>Voici \u00e0 quoi ressemblerait le <\/strong><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/learn-html\/\" rel=\"noopener\"><strong>HTML<\/strong><\/a><strong> :<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><code>&lt;body&gt;\n&nbsp; &lt;div class=\"parent\"&gt;\n&nbsp; &nbsp; &lt;div class=\"child\"&gt;&lt;\/div&gt;\n&nbsp; &lt;\/div&gt;\n&lt;\/body&gt;<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms.webp\" alt=\"Code CSS pour les transformations 3D \u00e0 gauche, et les designs par d\u00e9faut vs. survol pour les boutons \u00e0 droite.\" class=\"wp-image-47151 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/05_css_3d_transforms-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>Nous avons deux divs, parent et enfant. Le parent, notre sc\u00e8ne, a sa perspective r\u00e9gl\u00e9e \u00e0 500 pixels. L&#8217;enfant, un carr\u00e9 rouge, est initialement tourn\u00e9 de 45 degr\u00e9s le long de l&#8217;axe Y en utilisant <strong><code>rotateY(45deg)<\/code><\/strong>.<\/p>\n\n\n<p>En survol, nous utilisons <strong><code>transform: rotateY(0deg)<\/code><\/strong> pour r\u00e9initialiser la rotation, permettant ainsi de revenir en douceur \u00e0 sa position d&#8217;origine.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-controlling-the-css-transform-origin\">Contr\u00f4ler L&#8217;Origine De La Transformation CSS<\/h3>\n\n\n<p>Par d\u00e9faut, les transformations CSS se produisent autour du centre d&#8217;un \u00e9l\u00e9ment. Cependant, tu peux modifier ce point d&#8217;origine en utilisant la propri\u00e9t\u00e9 <strong><code>transform-origin<\/code><\/strong>. Cette propri\u00e9t\u00e9 te permet de sp\u00e9cifier les coordonn\u00e9es X, Y et Z du point autour duquel la transformation doit se produire.<\/p>\n\n\n<p>La syntaxe pour la propri\u00e9t\u00e9 <strong><code>transform-origin<\/code><\/strong> est la suivante :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.element { \ntransform-origin: x-axis y-axis z-axis; \n}<\/code><\/pre>\n\n\n<p>Les valeurs de <strong><code>x-axis<\/code><\/strong> et <strong><code>y-axis<\/code><\/strong> peuvent \u00eatre sp\u00e9cifi\u00e9es en utilisant des unit\u00e9s de longueur (par exemple, pixels), des pourcentages, ou des <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-do-keyword-research-wordpress-blog\/\" target=\"_blank\" rel=\"noopener\">mots-cl\u00e9s<\/a> (gauche, centre, droite, haut ou bas). La valeur de <strong><code>z-axis<\/code><\/strong> est seulement pertinente pour les transformations 3D et est sp\u00e9cifi\u00e9e en utilisant des unit\u00e9s de longueur.<\/p>\n\n\n<p>Voici un exemple qui montre comment la modification du <strong><code>transform-origin<\/code><\/strong> affecte une rotation :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.box { \ntransform: rotate(45deg); \ntransform-origin: top left; \n}<\/code><\/pre>\n\n\n<p>Dans ce cas, l&#8217;\u00e9l\u00e9ment pivotera de 45 degr\u00e9s autour de son coin sup\u00e9rieur gauche au lieu de son centre.<\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"989\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property.webp\" alt=\"Code CSS pour la propri\u00e9t\u00e9 rotate transform-origin \u00e0 gauche, et les designs avant vs apr\u00e8s pour l'\u00e9l\u00e9ment \u00e0 droite.\" class=\"wp-image-47153 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-300x185.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1024x633.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-768x475.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1536x949.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-600x371.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1200x742.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-730x451.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1460x902.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-784x485.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-1568x969.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/06_css_transform_origin_property-877x542.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/989;\" \/><\/figure>\n\n\n<p>La propri\u00e9t\u00e9 <strong><code>transform-origin<\/code><\/strong> te donne un contr\u00f4le pr\u00e9cis sur la fa\u00e7on dont les transformations sont appliqu\u00e9es, te permettant de cr\u00e9er des effets <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-web-design-trends\/\" target=\"_blank\" rel=\"noopener\">visuellement plus attrayants<\/a>.<\/p>\n\n\n<h2 id=\"h2_creating-complex-css-transform-effects-by-combining-them\" class=\"wp-block-heading\">Cr\u00e9ation D&#8217;effets De Transformation CSS Complexes En Les Combinant<\/h2>\n\n\n<p>Un des aspects les plus puissants de la propri\u00e9t\u00e9 de transformation CSS est la capacit\u00e9 \u00e0 combiner plusieurs transformations pour cr\u00e9er des effets complexes et visuellement impressionnants. En encha\u00eenant diff\u00e9rentes fonctions de transformation, tu peux lib\u00e9rer ta cr\u00e9ativit\u00e9 et cr\u00e9er des designs uniques et captivants.<\/p>\n\n\n<p>Disons que tu as une carte produit sur ton site e-commerce. Lorsqu&#8217;un utilisateur passe la souris dessus, tu veux qu&#8217;elle s&#8217;agrandisse, tourne l\u00e9g\u00e8rement et se soul\u00e8ve de la page avec un effet d&#8217;ombre :<\/p>\n\n\n<pre class=\"wp-block-code\"><code>.product-card {\n  transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.product-card:hover {\n  transform: scale(1.05) rotate(5deg);\n  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n}<\/code><\/pre>\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1299\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform.webp\" alt=\"Code pour combiner les effets de transformation CSS \u00e0 gauche, et les designs par d\u00e9faut vs. au survol pour la carte de produit \u00e0 droite. \" class=\"wp-image-47155 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-300x244.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1024x831.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-768x624.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1536x1247.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-600x487.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1200x974.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-730x593.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1460x1185.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-784x637.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-1568x1273.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/07_combining_css_transform-877x712.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1299;\" \/><\/figure>\n\n\n<p>Lorsqu&#8217;un utilisateur passe la souris sur la carte du produit, elle s&#8217;agrandit doucement jusqu&#8217;\u00e0 1,05 fois sa taille originale, tourne de 5 degr\u00e9s et gagne une ombre port\u00e9e qui cr\u00e9e un effet de soul\u00e8vement. La combinaison de l&#8217;agrandissement, de la rotation et de l&#8217;ombre cr\u00e9e une interaction dynamique et captivante.<\/p>\n\n\n<h2 id=\"h2_wrap-up-and-continued-learning\" class=\"wp-block-heading\">Synth\u00e8se Et Apprentissage Continu<\/h2>\n\n\n<p>Tu as pass\u00e9 du temps \u00e0 apprendre les transformations CSS : rotation, redimensionnement, inclinaison et positionnement, ce qui te permet de cr\u00e9er des effets visuels sophistiqu\u00e9s. Cette comp\u00e9tence est vraiment pr\u00e9cieuse pour <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/beginners-website-guide\/\" rel=\"noopener\">construire des sites web qui fonctionnent bien<\/a> sur diff\u00e9rents \u00e9crans et pour rendre tes sites plus attrayants visuellement.<\/p>\n\n\n<p>Cependant, il y a <em>encore<\/em> plus que tu peux faire avec \u00e7a. Si tu es int\u00e9ress\u00e9 \u00e0 aller plus loin, tu pourrais explorer certains de ces domaines :<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Utiliser CSS pour cr\u00e9er des transitions et animations fluides.<\/li>\n\n\n\n<li>Explorer les transformations 3D pour ajouter de la profondeur \u00e0 tes designs.<\/li>\n\n\n\n<li>Apprendre \u00e0 animer des images SVG pour des effets plus complexes.<\/li>\n\n\n\n<li>Trouver des fa\u00e7ons cr\u00e9atives de combiner les transformations avec d&#8217;autres propri\u00e9t\u00e9s CSS.<\/li>\n\n\n\n<li>Apprends <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/tailwind-css\/\" rel=\"noopener\">Tailwind CSS<\/a> et <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/bootstrap-guide\/\" rel=\"noopener\">Bootstrap CSS<\/a> pour rendre ton ensemble de page attrayant.<\/li>\n\n\n<\/ul>\n\n\n<p>La meilleure fa\u00e7on de progresser est de continuer \u00e0 travailler dessus et d&#8217;essayer de nouvelles choses. C&#8217;est ainsi que tu d\u00e9couvres ce qui est possible et que tu d\u00e9veloppes ton propre style unique.<\/p>\n\n\n<p>Lorsque tu commences \u00e0 jouer avec le CSS, tu auras probablement besoin d&#8217;un h\u00e9bergement \u00e0 haute vitesse qui ne ralentira pas ton site. D\u00e9couvre les plans d&#8217;<a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/hosting\/\" rel=\"noopener\">h\u00e9bergement partag\u00e9 de DreamHost<\/a> pour tous les besoins de ton site web !<\/p>\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>","protected":false},"excerpt":{"rendered":"<p>Emm\u00e8ne ton site vers de nouveaux sommets en d\u00e9bloquant le potentiel de la transformation CSS. Ces conseils pratiques t&#8217;aideront \u00e0 impl\u00e9menter les valeurs de transformation CSS comme un pro.<\/p>\n","protected":false},"author":1058,"featured_media":47129,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"\u00c9l\u00e8ve ton site \u00e0 de nouveaux sommets en exploitant le potentiel de CSS transform. Ces conseils pratiques t\u2019aideront \u00e0 impl\u00e9menter les valeurs de CSS transform comme un pro.","toc_headlines":"[[\"h-understanding-the-basics-of-css-transform\",\"Comprendre Les Bases De La Transformation CSS\"],[\"h2_exploring-2d-css-transformations\",\"Exploration des Transformations CSS 2D\"],[\"h2_basics-of-3d-css-transformations\",\"Principes De Base Des Transformations CSS 3D\"],[\"h2_creating-complex-css-transform-effects-by-combining-them\",\"Cr\u00e9ation D'effets De Transformation CSS Complexes En Les Combinant\"],[\"h2_wrap-up-and-continued-learning\",\"Synth\u00e8se Et Apprentissage Continu\"]]","hide_toc":false,"footnotes":""},"categories":[15005],"tags":[],"class_list":["post-69473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Apprendre \u00e0 Conna\u00eetre la Propri\u00e9t\u00e9 CSS Transform - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"\u00c9l\u00e8ve ton site \u00e0 de nouveaux sommets en exploitant le potentiel de CSS transform. Ces conseils pratiques t\u2019aideront \u00e0 impl\u00e9menter les valeurs de CSS transform comme un pro.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apprendre \u00e0 Conna\u00eetre la Propri\u00e9t\u00e9 CSS Transform\" \/>\n<meta property=\"og:description\" content=\"\u00c9l\u00e8ve ton site \u00e0 de nouveaux sommets en exploitant le potentiel de CSS transform. Ces conseils pratiques t\u2019aideront \u00e0 impl\u00e9menter les valeurs de CSS transform comme un pro.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-12T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T14:42:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Apprendre \u00e0 Conna\u00eetre la Propri\u00e9t\u00e9 CSS Transform - DreamHost Blog","description":"\u00c9l\u00e8ve ton site \u00e0 de nouveaux sommets en exploitant le potentiel de CSS transform. Ces conseils pratiques t\u2019aideront \u00e0 impl\u00e9menter les valeurs de CSS transform comme un pro.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/","og_locale":"en_US","og_type":"article","og_title":"Apprendre \u00e0 Conna\u00eetre la Propri\u00e9t\u00e9 CSS Transform","og_description":"\u00c9l\u00e8ve ton site \u00e0 de nouveaux sommets en exploitant le potentiel de CSS transform. Ces conseils pratiques t\u2019aideront \u00e0 impl\u00e9menter les valeurs de CSS transform comme un pro.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-06-12T14:00:00+00:00","article_modified_time":"2025-05-26T14:42:11+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Apprendre \u00e0 Conna\u00eetre la Propri\u00e9t\u00e9 CSS Transform","datePublished":"2024-06-12T14:00:00+00:00","dateModified":"2025-05-26T14:42:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/"},"wordCount":1974,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","articleSection":["Design de Site Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/","name":"Apprendre \u00e0 Conna\u00eetre la Propri\u00e9t\u00e9 CSS Transform - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","datePublished":"2024-06-12T14:00:00+00:00","dateModified":"2025-05-26T14:42:11+00:00","description":"\u00c9l\u00e8ve ton site \u00e0 de nouveaux sommets en exploitant le potentiel de CSS transform. Ces conseils pratiques t\u2019aideront \u00e0 impl\u00e9menter les valeurs de CSS transform comme un pro.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/06\/1460x1095_blog_hero_getting_to_know_the_css_transform_property.webp","width":1460,"height":1095,"caption":"Getting To Know The CSS Transform Property"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/apprendre-connatre-la-proprit-css-transform-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Apprendre \u00e0 Conna\u00eetre la Propri\u00e9t\u00e9 CSS Transform"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"fr","translations":{"fr":69473,"es":47158,"en":47128,"pl":51292,"pt":51332,"de":51335,"ru":51341,"uk":51353,"it":67918,"nl":69501},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=69473"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69473\/revisions"}],"predecessor-version":[{"id":69476,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/69473\/revisions\/69476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/47129"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=69473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=69473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=69473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}