{"id":67918,"date":"2024-06-12T07:00:00","date_gmt":"2024-06-12T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=67918"},"modified":"2025-06-11T13:19:38","modified_gmt":"2025-06-11T20:19:38","slug":"conoscere-la-proprieta-css-transform-it","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/","title":{"rendered":"Conoscere La Propriet\u00e0 CSS Transform"},"content":{"rendered":"\n<p>Hai scritto l&#8217;<a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a>, il tuo <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> sembra perfetto, e la tua pagina web appare fantastica. Ma manca qualcosa. Vuoi che il tuo sito web sembri vivo, che risalti davvero.<\/p>\n\n\n<p>Ecco dove entra in gioco la <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/css-frameworks\/\" rel=\"noopener\">trasformazione CSS<\/a>.<\/p>\n\n\n<p>Questa potente funzionalit\u00e0 ti consente di spostare, ridimensionare, ruotare e persino inclinare gli elementi della tua pagina. \u00c8 come aggiungere un po&#8217; di magia, rendendo i tuoi design interattivi e dinamici.<\/p>\n\n\n<p>Pensa a siti web dove potresti aver visto immagini che si inclinano quando ci passi sopra con il mouse, un effetto di zoom per vedere qualcosa pi\u00f9 da vicino, o un&#8217;icona su un pulsante che si muove quando ci passi sopra con il mouse.<\/p>\n\n\n<p>Queste sono le trasformazioni CSS che lavorano dietro le quinte.<\/p>\n\n\n<p>\u00c8 una propriet\u00e0 semplice che pu\u00f2 cambiare completamente il modo in cui gli utenti interagiscono con il tuo sito web. In questa guida, impareremo a creare effetti visivi interattivi che faranno distinguere il tuo sito web dalla massa.<\/p>\n\n\n<p>Tuffiamoci!<\/p>\n\n\n<h2 id=\"h-understanding-the-basics-of-css-transform\" class=\"wp-block-heading\">Comprendere Le Basi Della Trasformazione CSS<\/h2>\n\n\n<p>Prima di immergerti nelle trasformazioni CSS, devi avere una solida base di CSS. Se non conosci ancora il CSS, dai un&#8217;occhiata al nostro post sul blog su <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/learn-css\/\" rel=\"noopener\">come imparare il CSS<\/a>.<\/p>\n\n\n<p>Ora, passiamo direttamente alle trasformazioni CSS. Le trasformazioni CSS ti permettono di manipolare visivamente un elemento.<\/p>\n\n\n<p>Pensa a ruotare, scalare, inclinare o spostarla. Queste modifiche avvengono in uno spazio 2D o 3D offrendoti molta libert\u00e0 creativa.<\/p>\n\n\n<p>Ecco com&#8217;\u00e8 l&#8217;aggiunta di una semplice trasformazione CSS a un elemento:<\/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 esempio di una semplice trasformazione CSS su un elemento\" 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>Qui:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>.element<\/code><\/strong> \u00e8 il selettore per l&#8217;elemento che stai trasformando.<\/li>\n\n\n\n<li><strong><code>function(value)<\/code><\/strong> indica la trasformazione specifica e quanto ne vuoi.<\/li>\n\n\n<\/ul>\n\n\n<p>La propriet\u00e0 transform supporta molteplici funzioni, che possono essere combinate per creare trasformazioni complesse 2D e 3D.<\/p>\n\n\n<p>Esploriamone alcune, che ne dici?<\/p>\n\n\n<h2 id=\"h2_exploring-2d-css-transformations\" class=\"wp-block-heading\">Esplorando le Trasformazioni CSS 2D<\/h2>\n\n\n<p>Le trasformazioni CSS sono davvero fantastiche \u2014- ti permettono di manipolare come gli elementi vengono visualizzati in una pagina web. Pensalo come spostare oggetti nella vita reale, ma con il codice. Qui, esamineremo alcune delle trasformazioni bidimensionali disponibili in CSS.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Elementi Rotanti<\/h3>\n\n\n<p>Una delle cose pi\u00f9 comuni che puoi fare con le trasformazioni CSS \u00e8 ruotare oggetti. Supponi di avere un pulsante che dice <strong>Cliccami<\/strong>, o qualsiasi pulsante sul tuo sito web. Possiamo usare la funzione <strong><code>rotate<\/code><\/strong> in CSS per renderlo un po&#8217; pi\u00f9 interessante.<\/p>\n\n\n<p>Immagina di avere un <a href=\"https:\/\/www.dreamhost.com\/blog\/call-to-action-examples\/\" target=\"_blank\" rel=\"noopener\">pulsante di call-to-action sul tuo sito web<\/a>: <strong>Cliccami<\/strong>. Ecco come puoi usare <strong><code>rotate()<\/code><\/strong> per farlo risaltare:<\/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>Allora, cosa stiamo facendo qui?<\/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=\"Codice CSS per la rotazione della propriet\u00e0 sulla sinistra, e i design predefiniti vs. al passaggio del mouse per il pulsante &quot;Cliccami&quot; sulla destra.\" 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>Abbiamo specificato che quando qualcuno passa il mouse su un pulsante, questo dovrebbe ruotare di -10 gradi.<\/p>\n\n\n<p>La transizione di 0.3s specifica quanto tempo dovrebbe impiegare un&#8217;animazione per completarsi. Quindi, invece di passare alla posizione ruotata bruscamente, impiega un po&#8217; di tempo per mostrare all&#8217;utente una transizione fluida dallo stato normale a quello ruotato.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Elementi Scalabili<\/h3>\n\n\n<p>La funzione <strong><code>scale()<\/code><\/strong> ti permette di creare un senso di profondit\u00e0, enfasi e gerarchia visiva all&#8217;interno dei tuoi design.<\/p>\n\n\n<p>Immaginiamo che tu abbia a disposizione alcune testimonianze di clienti; qualcosa che vorresti mostrare ai visitatori del tuo sito web.<\/p>\n\n\n<p>Ora, non vogliamo solo che siano posizionati piattamente sulla pagina. Con un po&#8217; di trasformazione CSS, puoi farli risaltare quando il cursore di un utente si sofferma su di essi.<\/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=\"Propriet\u00e0 di scala della trasformazione 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>Cosa stiamo facendo qui?<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Per prima cosa, stiamo prendendo di mira ogni contenitore di testimonianze. Abbiamo presupposto la classe come <strong><code>testimonial-card<\/code><\/strong>.<\/li>\n\n\n\n<li>La propriet\u00e0 <strong><code>transition<\/code><\/strong> ammorbidisce l&#8217;effetto di scala nel corso di 0,3 secondi, cos\u00ec da renderlo naturale.&nbsp;<\/li>\n\n\n\n<li>Quando un utente passa il mouse sopra una card, essa si ingrandisce sottilmente di un po&#8217; (1,05 volte la sua dimensione originale).<\/li>\n\n\n<\/ul>\n\n\n<p>Questa piccola modifica cattura l&#8217;attenzione dell&#8217;utente e fa risaltare quella particolare testimonianza. \u00c8 una differenza sottile nella pagina, ma decisamente evidente.<\/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\">Elementi Inclinati<\/h3>\n\n\n<p>Lo skewing \u00e8 una trasformazione che ti permette di inclinare gli elementi lungo l&#8217;asse X o Y, creando una sensazione di movimento e dinamismo.<\/p>\n\n\n<p>In particolare, la trasformazione <strong><code>skew()<\/code><\/strong> offre un modo per introdurre un senso di movimento e dinamismo agli elementi del tuo sito web.<\/p>\n\n\n<p>Considera una sezione dedicata alle testimonianze dei clienti. Ecco come puoi usare <strong><code>skew()<\/code><\/strong> per farle risaltare:<\/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>Quando un utente passa il mouse su una testimonianza, questa si incliner\u00e0 sottilmente lungo l&#8217;asse X di -10 gradi.<\/p>\n\n\n<p>Questa leggera inclinazione, ottenuta attraverso la funzione <strong><code>skewX()<\/code><\/strong> all&#8217;interno della propriet\u00e0 di trasformazione CSS, <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noopener\">aggiunge interesse visivo<\/a> senza essere eccessivamente distraente.<\/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=\"Propriet\u00e0 di trasformazione inclinazione di CSS\" 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>Noterai anche che aggiungiamo costantemente la propriet\u00e0 di transizione specificando il tempo come 0.3s per completare un&#8217;animazione.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Traduzione O Spostamento Di Elementi<\/h3>\n\n\n<p>La traduzione nel <a href=\"https:\/\/www.dreamhost.com\/pro-services\/design\/custom-web-design\/\" target=\"_blank\" rel=\"noopener\">web design<\/a> significa spostare elementi in una pagina.<\/p>\n\n\n<p>Pensa a questo modo: stai posizionando elementi su una griglia e puoi spostarli lungo l&#8217;asse X, Y o anche Z senza cambiare o spostare nient&#8217;altro.<\/p>\n\n\n<p>Immagina di avere una barra di navigazione sul tuo sito web. Vuoi che reagisca in modo sottile quando il cursore di un visitatore passa sopra gli elementi del menu.<\/p>\n\n\n<p>Con <strong><code>translate( )<\/code><\/strong>, puoi farlo accadere. Vediamo del codice per capire meglio:<\/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>Quello che abbiamo fatto qui \u00e8 applicare un semplice effetto di transizione. Ora, quando passi il cursore su un <strong><code>.menu-item<\/code><\/strong>, si sposta fluidamente di 10 pixel verso destra. Fantastico, vero?<\/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=\"Codice CSS per la traduzione della propriet\u00e0 a sinistra, e i design predefiniti vs. al passaggio del mouse per i pulsanti a destra.\" 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 bellezza delle traduzioni \u00e8 che non si limitano solo agli effetti al passaggio del mouse. Puoi utilizzarle per creare <a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noopener\">animazioni d&#8217;ingresso e di uscita per gli elementi del tuo sito web<\/a>, spostare oggetti pertinenti a pagine specifiche quando ti trovi su quella pagina e molto altro.<\/p>\n\n\n<h2 id=\"h2_basics-of-3d-css-transformations\" class=\"wp-block-heading\">Fondamenti Delle Trasformazioni CSS 3D<\/h2>\n\n\n<p>Ora conosciamo il movimento su, gi\u00f9, sinistra e destra \u2014 questo \u00e8 il nostro movimento tipico in 2D.<\/p>\n\n\n<p>Tuttavia, CSS ti permette di entrare nel mondo delle trasformazioni 3D, dove possiamo manipolare gli elementi lungo l&#8217;asse z.<\/p>\n\n\n<p>Allora, quali trasformazioni 3D offre CSS?<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Prima, le funzioni di rotazione: <strong><code>rotateX(angle)<\/code>, <code>rotateY(angle)<\/code>, <\/strong>e<strong> <code>rotateZ(angle)<\/code>.<\/strong> Per mettere le cose in prospettiva, <strong><code>rotateZ<\/code><\/strong> \u00e8 la nostra ruota che gira, <strong><code>rotateY<\/code><\/strong> \u00e8 una pagina che si volta, e <strong><code>rotateX<\/code><\/strong> \u00e8 un lancio di moneta. Ognuna controlla la rotazione attorno ai rispettivi assi.<\/li>\n\n\n\n<li><strong><code>translateZ(z)<\/code><\/strong> trasla, o muove, un elemento lungo l&#8217;asse z. Un valore positivo lo avvicina, mentre un valore negativo lo allontana. Pensaci come regolare lo zoom di una fotocamera, mettendo a fuoco diverse profondit\u00e0.<\/li>\n\n\n\n<li>La <strong><code>scaleZ(z) function<\/code><\/strong> ti permette di scalare un elemento lungo l&#8217;asse z. \u00c8 come allungare o comprimere un elemento lungo una singola linea. Valori maggiori di 1 lo fanno apparire pi\u00f9 vicino a te, mentre valori tra 0 e 1 lo fanno retrocedere sullo sfondo.<\/li>\n\n\n<\/ul>\n\n\n<p>Per creare un effetto di trasformazione 3D, devi impostare una prospettiva sull&#8217;elemento genitore. La propriet\u00e0 prospettiva determina la distanza tra lo spettatore e il piano <strong><code>z=0<\/code><\/strong>, influenzando come vengono percepiti i cambiamenti 3D.<\/p>\n\n\n<p>Aggiungiamo qualche stile in pi\u00f9, come larghezza, altezza e <a target=\"_blank\" href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115003016152-Adjusting-colors-in-Remixer\" rel=\"noopener\">colore di sfondo<\/a> per rendere la transizione pi\u00f9 chiara quando la guardi dal tuo schermo:<\/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>Ecco come sarebbe il <\/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=\"Codice CSS per trasformazioni 3D a sinistra, e i design predefiniti vs. al passaggio del mouse per i pulsanti a destra.\" 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>Abbiamo due div, genitore e figlio. Il genitore, il nostro palcoscenico, ha la sua prospettiva impostata a 500 pixel. Il figlio, un quadrato rosso, \u00e8 inizialmente ruotato di 45 gradi lungo l&#8217;asse Y utilizzando <strong><code>rotateY(45deg)<\/code><\/strong>.<\/p>\n\n\n<p>Al passaggio del mouse, utilizziamo <strong><code>transform: rotateY(0deg)<\/code><\/strong> per resettare la rotazione, permettendo un ritorno fluido alla posizione originale.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-controlling-the-css-transform-origin\">Controllare L&#8217;Origine Della Trasformazione CSS<\/h3>\n\n\n<p>Di default, le trasformazioni CSS avvengono attorno al centro di un elemento. Tuttavia, puoi cambiare questo punto di origine utilizzando la propriet\u00e0 <strong><code>transform-origin<\/code><\/strong>. Questa propriet\u00e0 ti permette di specificare le coordinate X, Y e Z del punto attorno al quale dovrebbe avvenire la trasformazione.<\/p>\n\n\n<p>La sintassi per la propriet\u00e0 <strong><code>transform-origin<\/code><\/strong> \u00e8 la seguente:<\/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>I valori dell&#8217;<strong><code>asse-x<\/code><\/strong> e dell&#8217;<strong><code>asse-y<\/code><\/strong> possono essere specificati utilizzando unit\u00e0 di misura (ad esempio, pixel), percentuali o <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-do-keyword-research-wordpress-blog\/\" target=\"_blank\" rel=\"noopener\">parole chiave<\/a> (sinistra, centro, destra, alto o basso). Il valore dell&#8217;<strong><code>asse-z<\/code><\/strong> \u00e8 rilevante solo per le trasformazioni 3D ed \u00e8 specificato utilizzando unit\u00e0 di misura.<\/p>\n\n\n<p>Ecco un esempio che dimostra come cambiare l&#8217;<strong><code>transform-origin<\/code><\/strong> influisce su una rotazione:<\/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>In questo caso, l&#8217;elemento ruoter\u00e0 di 45 gradi intorno al suo angolo in alto a sinistra invece che intorno al suo centro.<\/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=\"Codice CSS ruota la propriet\u00e0 transform-origin a sinistra, e i disegni prima vs. dopo per l'elemento a destra.\" 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 propriet\u00e0 <strong><code>transform-origin<\/code><\/strong> ti offre un controllo preciso su come vengono applicate le trasformazioni, consentendoti di creare effetti pi\u00f9 precisi e <a href=\"https:\/\/www.dreamhost.com\/blog\/wordpress-web-design-trends\/\" target=\"_blank\" rel=\"noopener\">visivamente accattivanti<\/a>.<\/p>\n\n\n<h2 id=\"h2_creating-complex-css-transform-effects-by-combining-them\" class=\"wp-block-heading\">Creazione Di Effetti Di Trasformazione CSS Complessi Combinandoli<\/h2>\n\n\n<p>Uno degli aspetti pi\u00f9 potenti della propriet\u00e0 transform di CSS \u00e8 la capacit\u00e0 di combinare pi\u00f9 trasformazioni per creare effetti complessi e visivamente sorprendenti. Concatenando diverse funzioni di trasformazione, puoi liberare la tua creativit\u00e0 e realizzare design unici e affascinanti.<\/p>\n\n\n<p>Diciamo che hai una scheda prodotto sul tuo sito e-commerce. Quando un utente passa il cursore sopra la scheda, vuoi che si ingrandisca, ruoti leggermente e si sollevi dalla pagina con un effetto ombra:<\/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=\"Codice per combinare gli effetti di trasformazione CSS sulla sinistra, e i design predefiniti vs. al passaggio del mouse per la scheda del prodotto sulla destra.\" 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>Quando un utente passa il mouse sulla scheda del prodotto, questa si ingrandisce dolcemente fino a 1,05 volte la sua dimensione originale, ruota di 5 gradi e ottiene un&#8217;ombra esterna che crea un effetto sollevato. La combinazione di ingrandimento, rotazione e ombra crea un&#8217;interazione dinamica e coinvolgente.<\/p>\n\n\n<h2 id=\"h2_wrap-up-and-continued-learning\" class=\"wp-block-heading\">Conclusione E Apprendimento Continuo<\/h2>\n\n\n<p>Hai dedicato tempo all&#8217;apprendimento delle trasformazioni CSS: rotazione, ridimensionamento, inclinazione e posizionamento, che ti permettono di creare alcuni effetti visivi sofisticati. Questa abilit\u00e0 \u00e8 davvero preziosa per <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/beginners-website-guide\/\" rel=\"noopener\">costruire siti web che funzionino bene<\/a> su schermi diversi e per rendere i tuoi siti pi\u00f9 visivamente attraenti.<\/p>\n\n\n<p>Tuttavia, c&#8217;\u00e8 <em>ancora<\/em> di pi\u00f9 che puoi fare con questo. Se sei interessato ad andare oltre, potresti esplorare alcune di queste aree:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li>Utilizzare CSS per realizzare transizioni e animazioni fluide.<\/li>\n\n\n\n<li>Esplorare le trasformazioni 3D per aggiungere profondit\u00e0 ai tuoi progetti.<\/li>\n\n\n\n<li>Imparare a animare immagini SVG per effetti pi\u00f9 complessi.<\/li>\n\n\n\n<li>Trovare modi creativi per combinare trasformazioni con altre propriet\u00e0 CSS.<\/li>\n\n\n\n<li>Impara <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/tailwind-css\/\" rel=\"noopener\">Tailwind CSS<\/a> e <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/bootstrap-guide\/\" rel=\"noopener\">Bootstrap CSS<\/a> per rendere bella l&#8217;intera pagina.<\/li>\n\n\n<\/ul>\n\n\n<p>Il modo migliore per migliorare \u00e8 continuare a lavorarci e provare cose nuove. \u00c8 cos\u00ec che scopri cosa \u00e8 possibile e sviluppi il tuo stile unico.<\/p>\n\n\n<p>Quando inizi a giocare con CSS, avrai probabilmente bisogno di un hosting ad alta velocit\u00e0 che non rallenti il tuo sito. Scopri i <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/hosting\/\" rel=\"noopener\">piani di hosting condiviso di DreamHost<\/a> super veloci per tutte le esigenze del tuo sito 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>Porta il tuo sito a nuovi livelli sbloccando il potenziale della trasformazione CSS. Questi consigli pratici ti aiuteranno a implementare i valori di trasformazione CSS come un professionista.<\/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":"Porta il tuo sito a nuovi livelli sbloccando il potenziale di CSS transform. Questi suggerimenti pratici ti aiuteranno a implementare i valori di CSS transform come un professionista.","toc_headlines":"[[\"h-understanding-the-basics-of-css-transform\",\"Comprendere Le Basi Della Trasformazione CSS\"],[\"h2_exploring-2d-css-transformations\",\"Esplorando le Trasformazioni CSS 2D\"],[\"h2_basics-of-3d-css-transformations\",\"Fondamenti Delle Trasformazioni CSS 3D\"],[\"h2_creating-complex-css-transform-effects-by-combining-them\",\"Creazione Di Effetti Di Trasformazione CSS Complessi Combinandoli\"],[\"h2_wrap-up-and-continued-learning\",\"Conclusione E Apprendimento Continuo\"]]","hide_toc":false,"footnotes":""},"categories":[15068],"tags":[],"class_list":["post-67918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-it"],"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>Conoscere La Propriet\u00e0 CSS Transform - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Porta il tuo sito a nuovi livelli sbloccando il potenziale di CSS transform. Questi suggerimenti pratici ti aiuteranno a implementare i valori di CSS transform come un professionista.\" \/>\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\/it\/conoscere-la-proprieta-css-transform-it\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Conoscere La Propriet\u00e0 CSS Transform\" \/>\n<meta property=\"og:description\" content=\"Porta il tuo sito a nuovi livelli sbloccando il potenziale di CSS transform. Questi suggerimenti pratici ti aiuteranno a implementare i valori di CSS transform come un professionista.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/\" \/>\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-06-11T20:19:38+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=\"9 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Conoscere La Propriet\u00e0 CSS Transform - DreamHost Blog","description":"Porta il tuo sito a nuovi livelli sbloccando il potenziale di CSS transform. Questi suggerimenti pratici ti aiuteranno a implementare i valori di CSS transform come un professionista.","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\/it\/conoscere-la-proprieta-css-transform-it\/","og_locale":"en_US","og_type":"article","og_title":"Conoscere La Propriet\u00e0 CSS Transform","og_description":"Porta il tuo sito a nuovi livelli sbloccando il potenziale di CSS transform. Questi suggerimenti pratici ti aiuteranno a implementare i valori di CSS transform come un professionista.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/","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-06-11T20:19:38+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":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Conoscere La Propriet\u00e0 CSS Transform","datePublished":"2024-06-12T14:00:00+00:00","dateModified":"2025-06-11T20:19:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/"},"wordCount":1613,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/#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 del Sito Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/","name":"Conoscere La Propriet\u00e0 CSS Transform - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/#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-06-11T20:19:38+00:00","description":"Porta il tuo sito a nuovi livelli sbloccando il potenziale di CSS transform. Questi suggerimenti pratici ti aiuteranno a implementare i valori di CSS transform come un professionista.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/it\/conoscere-la-proprieta-css-transform-it\/#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\/it\/conoscere-la-proprieta-css-transform-it\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Conoscere La Propriet\u00e0 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":"it","translations":{"it":67918,"es":47158,"en":47128,"pl":51292,"pt":51332,"de":51335,"ru":51341,"uk":51353,"fr":69473,"nl":69501},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/67918","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=67918"}],"version-history":[{"count":2,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/67918\/revisions"}],"predecessor-version":[{"id":67922,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/67918\/revisions\/67922"}],"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=67918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=67918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=67918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}