{"id":51332,"date":"2024-06-12T07:00:00","date_gmt":"2024-06-12T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=51332"},"modified":"2025-05-26T12:42:39","modified_gmt":"2025-05-26T19:42:39","slug":"transformacao-css","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/","title":{"rendered":"Introdu\u00e7\u00e3o \u00e0 Propriedade Transform do CSS"},"content":{"rendered":"<p>Voc\u00ea escreveu o <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/html\/\" target=\"_blank\" rel=\"noopener\">HTML<\/a>, seu <a href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\" target=\"_blank\" rel=\"noopener\">CSS<\/a> parece estar correto, e sua p\u00e1gina web est\u00e1 \u00f3tima. Mas falta algo. Voc\u00ea quer que seu site pare\u00e7a vivo, para realmente se destacar.<\/p>\n<p>\u00c9 a\u00ed que entra o <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/frameworks-css\/\" rel=\"noopener\">transforma\u00e7\u00e3o CSS<\/a>.<\/p>\n<p>Este recurso poderoso permite mover, redimensionar, rotacionar e at\u00e9 mesmo inclinar elementos na sua p\u00e1gina. \u00c9 como adicionar um pouco de magia, fazendo seus designs parecerem interativos e din\u00e2micos.<\/p>\n<p>Pense em sites onde voc\u00ea pode ter visto imagens que inclinam quando voc\u00ea passa o mouse sobre elas, um efeito de zoom para ver algo mais de perto, ou um \u00edcone em um bot\u00e3o que se move quando voc\u00ea passa o mouse sobre ele.<\/p>\n<p>Isso s\u00e3o transforma\u00e7\u00f5es CSS funcionando por tr\u00e1s dos bastidores.<\/p>\n<p>\u00c9 uma propriedade simples que pode mudar completamente como os usu\u00e1rios interagem com seu site. Neste guia, aprenderemos como criar efeitos visuais interativos que far\u00e3o seu site se destacar entre os demais.<\/p>\n<p>Vamos mergulhar!<\/p>\n<h2 id=\"h-understanding-the-basics-of-css-transform\" class=\"wp-block-heading\">Entendendo os Fundamentos da Transforma\u00e7\u00e3o em CSS<\/h2>\n<p>Antes de mergulhar na transforma\u00e7\u00e3o CSS, voc\u00ea precisa ter uma s\u00f3lida base em CSS. Se voc\u00ea ainda n\u00e3o conhece CSS, confira nosso post no blog sobre <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-css\/\" rel=\"noopener\">aprender CSS<\/a>.<\/p>\n<p>Agora, vamos direto para as transforma\u00e7\u00f5es CSS. As transforma\u00e7\u00f5es CSS permitem que voc\u00ea manipule visualmente um elemento.<\/p>\n<p>Pense em rotacionar, escalar, inclinar ou moviment\u00e1-lo. Essas mudan\u00e7as ocorrem em um espa\u00e7o 2D ou 3D, dando-lhe muita liberdade criativa.<\/p>\n<p>Aqui est\u00e1 como fica a adi\u00e7\u00e3o de uma transforma\u00e7\u00e3o CSS simples a um elemento:<\/p>\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=\"um exemplo de uma transforma\u00e7\u00e3o CSS simples em um 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<p>Aqui:<\/p>\n<ul class=\"wp-block-list\"><li><strong>.<code>element<\/code><\/strong> \u00e9 o seletor para o elemento que voc\u00ea est\u00e1 transformando.<\/li><li><strong><code>function(value)<\/code><\/strong> indica a transforma\u00e7\u00e3o espec\u00edfica e quanto dela voc\u00ea deseja.<\/li><\/ul>\n<p>A propriedade de transforma\u00e7\u00e3o suporta m\u00faltiplas fun\u00e7\u00f5es, que podem ser combinadas para criar transforma\u00e7\u00f5es complexas em 2D e 3D.<\/p>\n<p>Vamos explorar alguns deles, que tal?<\/p>\n<h2 id=\"h2_exploring-2d-css-transformations\" class=\"wp-block-heading\">Explorando Transforma\u00e7\u00f5es CSS 2D<\/h2>\n<p>As transforma\u00e7\u00f5es CSS s\u00e3o muito legais \u2014 elas permitem manipular como os elementos s\u00e3o exibidos em uma p\u00e1gina da web. Pense nisso como mover coisas na vida real, mas com c\u00f3digo. Aqui, vamos olhar para algumas das transforma\u00e7\u00f5es bidimensionais dispon\u00edveis em CSS.<\/p>\n<h3 class=\"wp-block-heading\">Elementos Rotativos<\/h3>\n<p>Uma das coisas mais comuns que voc\u00ea pode fazer com transforma\u00e7\u00f5es CSS \u00e9 rotacionar elementos. Suponha que voc\u00ea tenha um bot\u00e3o que diz <strong>Clique<\/strong>, ou qualquer bot\u00e3o no seu website. Podemos usar a fun\u00e7\u00e3o <strong><code>rotate<\/code><\/strong> em CSS para torn\u00e1-lo um pouco mais interessante.<\/p>\n<p>Vamos supor que voc\u00ea tenha um <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/exemplos-de-chamada-para-acao\/\" target=\"_blank\" rel=\"noopener\">bot\u00e3o de chamada para a\u00e7\u00e3o no seu site<\/a>: <strong>Clique<\/strong>. Aqui est\u00e1 como voc\u00ea pode usar <strong><code>rotate()<\/code><\/strong> para faz\u00ea-lo se destacar:<\/p>\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<p>Ent\u00e3o, o que estamos fazendo aqui?<\/p>\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=\"C\u00f3digo CSS para rotacionar a propriedade \u00e0 esquerda, e os designs padr\u00e3o vs. ao passar o mouse para o bot\u00e3o &quot;Clique&quot; \u00e0 direita.\" 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<p>Especificamos que, quando algu\u00e9m passa o mouse sobre um bot\u00e3o, ele deve girar -10 graus.<\/p>\n<p>A transi\u00e7\u00e3o de 0,3s especifica quanto tempo uma anima\u00e7\u00e3o deve levar para ser conclu\u00edda. Assim, em vez de mudar para a posi\u00e7\u00e3o rotacionada de forma brusca, leva um pouco de tempo para mostrar ao usu\u00e1rio uma transi\u00e7\u00e3o suave do estado normal para o estado rotacionado.<\/p>\n<h3 class=\"wp-block-heading\">Elementos de Escala<\/h3>\n<p>A fun\u00e7\u00e3o <strong><code>scale()<\/code><\/strong> permite que voc\u00ea crie uma sensa\u00e7\u00e3o de profundidade, \u00eanfase e hierarquia visual dentro de seus designs.<\/p>\n<p>Vamos supor que voc\u00ea tenha alguns depoimentos de clientes em m\u00e3os; algo que voc\u00ea gostaria de mostrar aos visitantes do seu site.<\/p>\n<p>Agora, n\u00e3o queremos apenas que eles fiquem l\u00e1 parados na p\u00e1gina. Com um pouco de transforma\u00e7\u00e3o CSS, voc\u00ea pode faz\u00ea-los se destacar quando o cursor do usu\u00e1rio passar sobre eles.<\/p>\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<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=\"Propriedade de escala de transforma\u00e7\u00e3o do 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<p>O que estamos fazendo aqui?<\/p>\n<ul class=\"wp-block-list\"><li>Primeiro, estamos focando em cada cont\u00eainer de depoimento. Assumimos a classe como <strong><code>testimonial-card<\/code><\/strong>.<\/li><li>A propriedade <strong><code>transition<\/code><\/strong> suaviza o efeito de escala ao longo de 0,3 segundos, para que pare\u00e7a natural.&nbsp;<\/li><li>Quando um usu\u00e1rio passa o mouse sobre um cart\u00e3o, ele aumenta sutilmente um pouco (1,05 vezes o seu tamanho original).<\/li><\/ul>\n<p>Esta pequena mudan\u00e7a chama a aten\u00e7\u00e3o do usu\u00e1rio e faz com que aquele depoimento espec\u00edfico se destaque. \u00c9 uma diferen\u00e7a sutil na p\u00e1gina, mas certamente not\u00e1vel.<\/p>\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<h3 class=\"wp-block-heading\">Elementos Inclinados<\/h3>\n<p>Skewing \u00e9 uma transforma\u00e7\u00e3o que permite inclinar elementos ao longo do eixo X ou Y, criando uma sensa\u00e7\u00e3o de movimento e dinamismo.<\/p>\n<p>Em particular, a transforma\u00e7\u00e3o <strong><code>skew()<\/code><\/strong> oferece uma maneira de introduzir um senso de movimento e dinamismo aos elementos do seu site.<\/p>\n<p>Considere uma se\u00e7\u00e3o dedicada a depoimentos de clientes. Veja como voc\u00ea pode usar <strong><code>skew()<\/code><\/strong> para destac\u00e1-los:<\/p>\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<p>Quando um usu\u00e1rio passar o mouse sobre um depoimento, ele inclinar\u00e1 sutilmente ao longo do eixo X em -10 graus.<\/p>\n<p>Este pequeno desvio, obtido por meio da fun\u00e7\u00e3o <strong><code>skewX()<\/code><\/strong> dentro da propriedade de transforma\u00e7\u00e3o CSS, <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/elementos-do-webdesign\/\" target=\"_blank\" rel=\"noopener\">adiciona interesse visual<\/a> sem ser excessivamente distrativo.<\/p>\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=\"Propriedade de transforma\u00e7\u00e3o skew do 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<p>Voc\u00ea tamb\u00e9m notar\u00e1 que adicionamos consistentemente a propriedade de transi\u00e7\u00e3o especificando o tempo como 0,3s para que uma anima\u00e7\u00e3o seja conclu\u00edda.<\/p>\n<h3 class=\"wp-block-heading\">Traduzindo ou Movendo Elementos<\/h3>\n<p>Tradu\u00e7\u00e3o em <a href=\"https:\/\/www.dreamhost.com\/pt\/servicos-profissionais\/design\/design-web-personalizado\/\" target=\"_blank\" rel=\"noopener\">web design<\/a> significa mover elementos ao redor de uma p\u00e1gina.<\/p>\n<p>Pense nisso assim: voc\u00ea est\u00e1 posicionando elementos em uma grade e pode desloc\u00e1-los ao longo do eixo X, Y ou at\u00e9 Z sem alterar ou mover qualquer outra coisa.<\/p>\n<p>Imagine que voc\u00ea tem uma barra de navega\u00e7\u00e3o em seu site. Voc\u00ea quer que ela reaja de forma sutil quando o cursor do visitante passar sobre os itens do menu.<\/p>\n<p>Com <strong><code>translate( )<\/code><\/strong>, voc\u00ea pode fazer isso acontecer. Vamos ver um pouco de c\u00f3digo para entender melhor isso:<\/p>\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<p>O que fizemos aqui foi aplicar um simples efeito de transi\u00e7\u00e3o. Agora, quando voc\u00ea passa o cursor sobre um <strong><code>.menu-item<\/code><\/strong>, ele se move suavemente 10 pixels para a direita. Legal, certo?<\/p>\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=\"C\u00f3digo CSS para traduzir a propriedade \u00e0 esquerda, e os designs padr\u00e3o vs. hover para os bot\u00f5es \u00e0 direita.\" 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<p>A beleza das tradu\u00e7\u00f5es \u00e9 que elas n\u00e3o se limitam apenas a efeitos de passar o mouse. Voc\u00ea pode us\u00e1-las para criar <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/animacao-css\/\" target=\"_blank\" rel=\"noopener\">anima\u00e7\u00f5es de entrada e sa\u00edda interessantes para o seu site<\/a>, mover itens relevantes para p\u00e1ginas espec\u00edficas quando voc\u00ea est\u00e1 nessa p\u00e1gina e muito mais.<\/p>\n<h2 id=\"h2_basics-of-3d-css-transformations\" class=\"wp-block-heading\">No\u00e7\u00f5es B\u00e1sicas das Transforma\u00e7\u00f5es CSS 3D<\/h2>\n<p>J\u00e1 estamos familiarizados com mover coisas para cima, para baixo, para a esquerda e para a direita \u2014 esse \u00e9 o nosso movimento 2D t\u00edpico.<\/p>\n<p>Entretanto, o CSS permite que voc\u00ea entre no mundo das transforma\u00e7\u00f5es 3D, onde podemos manipular elementos ao longo do eixo z.<\/p>\n<p>Ent\u00e3o, quais transforma\u00e7\u00f5es 3D o CSS oferece?<\/p>\n<ul class=\"wp-block-list\"><li>Primeiro, as fun\u00e7\u00f5es de rota\u00e7\u00e3o: <strong><code>rotateX(angle)<\/code>, <code>rotateY(angle)<\/code><\/strong> e<strong> <code>rotateZ(angle)<\/code><\/strong>. Para colocar isso em perspectiva, <strong><code>rotateZ<\/code><\/strong> \u00e9 nossa roda girat\u00f3ria, <strong><code>rotateY<\/code><\/strong> \u00e9 uma p\u00e1gina virando, e <strong><code>rotateX<\/code><\/strong> \u00e9 um giro de moeda. Eles controlam a rota\u00e7\u00e3o em torno de seus respectivos eixos.<\/li><li><strong><code>translateZ(z)<\/code><\/strong> traduz, ou move, um elemento ao longo do eixo z. Um valor positivo o aproxima, enquanto um valor negativo o afasta. Pense nisso como ajustar o zoom de uma c\u00e2mera, focando em diferentes profundidades.<\/li><li>A fun\u00e7\u00e3o <strong><code>scaleZ(z)<\/code><\/strong> permite escalar um elemento ao longo do eixo z. \u00c9 como esticar ou comprimir um elemento ao longo de uma \u00fanica linha. Valores maiores que 1 fazem com que pare\u00e7a mais pr\u00f3ximo de voc\u00ea, enquanto valores entre 0 e 1 fazem com que recue para o plano de fundo.<\/li><\/ul>\n<p>Para criar um efeito de transforma\u00e7\u00e3o 3D, voc\u00ea precisa definir uma perspectiva no elemento pai. A propriedade de perspectiva determina a dist\u00e2ncia entre o espectador e o plano <strong><code>z=0<\/code><\/strong>, afetando como as transforma\u00e7\u00f5es 3D s\u00e3o percebidas.<\/p>\n<p>Vamos adicionar alguns estilos a mais, como largura, altura e <a target=\"_blank\" href=\"https:\/\/help.dreamhost.com\/hc\/en-us\/articles\/115003016152-Adjusting-colors-in-Remixer\" rel=\"noopener\">cor de fundo<\/a> para tornar a transi\u00e7\u00e3o mais clara quando voc\u00ea olhar da sua tela:<\/p>\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<p><strong>Aqui est\u00e1 como o <\/strong><a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/aprender-html\/\" rel=\"noopener\"><strong>HTML<\/strong><\/a><strong> seria:<\/strong><\/p>\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<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=\"C\u00f3digo CSS para transforma\u00e7\u00f5es 3D \u00e0 esquerda, e os designs padr\u00e3o vs. ao passar o mouse para os bot\u00f5es \u00e0 direita.\" 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<p>Temos dois divs, pai e filho. O pai, nosso palco, tem sua perspectiva definida para 500 pixels. O filho, um quadrado vermelho, \u00e9 inicialmente rotacionado 45 graus ao longo do eixo Y usando <strong><code>rotateY(45deg)<\/code><\/strong>.<\/p>\n<p>Ao passar o mouse, usamos <strong><code>transform: rotateY(0deg)<\/code><\/strong> para resetar a rota\u00e7\u00e3o, permitindo que retorne suavemente \u00e0 sua posi\u00e7\u00e3o original.<\/p>\n<h3 class=\"wp-block-heading\" id=\"h-controlling-the-css-transform-origin\">Controlando a Origem da Transforma\u00e7\u00e3o CSS<\/h3>\n<p>Por padr\u00e3o, as transforma\u00e7\u00f5es CSS ocorrem ao redor do centro de um elemento. No entanto, voc\u00ea pode alterar esse ponto de origem usando a propriedade <strong><code>transform-origin<\/code><\/strong>. Esta propriedade permite que voc\u00ea especifique as coordenadas X, Y e Z do ponto ao redor do qual a transforma\u00e7\u00e3o deve ocorrer.<\/p>\n<p>A sintaxe para a propriedade <strong><code>transform-origin<\/code><\/strong> \u00e9 a seguinte:<\/p>\n<pre class=\"wp-block-code\"><code>.element { \ntransform-origin: x-axis y-axis z-axis; \n}<\/code><\/pre>\n<p>Os valores de <strong><code>eixo-x<\/code><\/strong> e <strong><code>eixo-y<\/code><\/strong> podem ser especificados usando unidades de medida (por exemplo, pixels), porcentagens ou <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-do-keyword-research-wordpress-blog\/\" target=\"_blank\" rel=\"noopener\">palavras-chave<\/a> (esquerda, centro, direita, topo ou base). O valor de <strong><code>eixo-z<\/code><\/strong> s\u00f3 \u00e9 relevante para transforma\u00e7\u00f5es 3D e \u00e9 especificado usando unidades de medida.<\/p>\n<p>Aqui est\u00e1 um exemplo que demonstra como a mudan\u00e7a da <strong><code>transform-origin<\/code><\/strong> afeta uma rota\u00e7\u00e3o:<\/p>\n<pre class=\"wp-block-code\"><code>.box { \ntransform: rotate(45deg); \ntransform-origin: top left; \n}<\/code><\/pre>\n<p>Neste caso, o elemento ir\u00e1 girar 45 graus em torno do seu canto superior esquerdo, em vez de seu centro.<\/p>\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=\"C\u00f3digo CSS para a propriedade transform-origin para rota\u00e7\u00e3o \u00e0 esquerda, e os designs antes e depois do elemento \u00e0 direita.\" 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<p>A propriedade <strong><code>transform-origin<\/code><\/strong> oferece um controle mais detalhado sobre como as transforma\u00e7\u00f5es s\u00e3o aplicadas, permitindo criar efeitos mais precisos e <a href=\"https:\/\/www.dreamhost.com\/blog\/pt\/tendencias-de-design-web-do-wordpress\/\" target=\"_blank\" rel=\"noopener\">visualmente atrativos<\/a>.<\/p>\n<h2 id=\"h2_creating-complex-css-transform-effects-by-combining-them\" class=\"wp-block-heading\">Criando Efeitos de Transforma\u00e7\u00e3o CSS Complexos Combinando-os<\/h2>\n<p>Um dos aspectos mais poderosos da propriedade de transforma\u00e7\u00e3o do CSS \u00e9 a capacidade de combinar m\u00faltiplas transforma\u00e7\u00f5es para criar efeitos complexos e visualmente impressionantes. Ao encadear diferentes fun\u00e7\u00f5es de transforma\u00e7\u00e3o, voc\u00ea pode liberar sua criatividade e criar designs \u00fanicos e cativantes.<\/p>\n<p>Vamos supor que voc\u00ea tem um cart\u00e3o de produto no seu site de com\u00e9rcio eletr\u00f4nico. Quando um usu\u00e1rio passa o mouse sobre o cart\u00e3o, voc\u00ea quer que ele aumente de tamanho, gire levemente e se levante da p\u00e1gina com um efeito de sombra:<\/p>\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<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=\"C\u00f3digo para combinar efeitos de transforma\u00e7\u00e3o CSS \u00e0 esquerda, e os designs padr\u00e3o vs. hover para o cart\u00e3o de produto \u00e0 direita.\" 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<p>Quando um usu\u00e1rio passa o mouse sobre o cart\u00e3o do produto, ele aumenta suavemente para 1,05 vezes o seu tamanho original, rotaciona em 5 graus e ganha uma sombra que cria um efeito de eleva\u00e7\u00e3o. A combina\u00e7\u00e3o de escala, rota\u00e7\u00e3o e sombra cria uma intera\u00e7\u00e3o din\u00e2mica e envolvente.<\/p>\n<h2 id=\"h2_wrap-up-and-continued-learning\" class=\"wp-block-heading\">Conclus\u00e3o e Aprendizado Cont\u00ednuo<\/h2>\n<p>Voc\u00ea dedicou tempo aprendendo sobre transforma\u00e7\u00f5es em CSS: rotacionar, redimensionar, inclinar e posicionar, o que permite criar alguns efeitos visuais sofisticados. Esta habilidade \u00e9 realmente valiosa para <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-para-iniciantes-em-sites\/\" rel=\"noopener\">construir sites que funcionam bem<\/a> em diferentes telas e para tornar seus sites mais visualmente atraentes.<\/p>\n<p>No entanto, h\u00e1 <em>ainda<\/em> mais que voc\u00ea pode fazer com isso. Se voc\u00ea estiver interessado em ir al\u00e9m, poderia explorar algumas destas \u00e1reas:<\/p>\n<ul class=\"wp-block-list\"><li>Usando CSS para criar transi\u00e7\u00f5es e anima\u00e7\u00f5es suaves.<\/li><li>Explorando transforma\u00e7\u00f5es 3D para adicionar profundidade aos seus designs.<\/li><li>Aprendendo como animar imagens SVG para efeitos mais complexos.<\/li><li>Encontrando maneiras criativas de combinar transforma\u00e7\u00f5es com outras propriedades do CSS.<\/li><li>Aprenda <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/tailwind-css\/\" rel=\"noopener\">Tailwind CSS<\/a> e <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/blog\/pt\/guia-de-bootstrap\/\" rel=\"noopener\">Bootstrap CSS<\/a> para fazer sua p\u00e1gina ficar bonita.<\/li><\/ul>\n<p>A melhor maneira de melhorar \u00e9 continuar trabalhando com isso e tentar coisas novas. \u00c9 assim que voc\u00ea descobre o que \u00e9 poss\u00edvel e desenvolve seu pr\u00f3prio estilo \u00fanico.<\/p>\n<p>Quando voc\u00ea come\u00e7a a mexer com CSS, provavelmente precisar\u00e1 de uma hospedagem de alta velocidade que n\u00e3o deixe seu site lento. Conhe\u00e7a os planos de hospedagem compartilhada super-r\u00e1pidos da <a target=\"_blank\" href=\"https:\/\/www.dreamhost.com\/pt\/hosting\/\" rel=\"noopener\">DreamHost<\/a> para todas as necessidades do seu site!<\/p>\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>Eleve seu site a novos patamares desbloqueando o potencial da transforma\u00e7\u00e3o CSS. Estas dicas pr\u00e1ticas ajudar\u00e3o voc\u00ea a implementar valores de transforma\u00e7\u00e3o CSS como um profissional.<\/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":"","toc_headlines":"[[\"h-understanding-the-basics-of-css-transform\",\"Entendendo os Fundamentos da Transforma\u00e7\u00e3o em CSS\"],[\"h2_exploring-2d-css-transformations\",\"Explorando Transforma\u00e7\u00f5es CSS 2D\"],[\"h2_basics-of-3d-css-transformations\",\"No\u00e7\u00f5es B\u00e1sicas das Transforma\u00e7\u00f5es CSS 3D\"],[\"h2_creating-complex-css-transform-effects-by-combining-them\",\"Criando Efeitos de Transforma\u00e7\u00e3o CSS Complexos Combinando-os\"],[\"h2_wrap-up-and-continued-learning\",\"Conclus\u00e3o e Aprendizado Cont\u00ednuo\"]]","hide_toc":false,"footnotes":""},"categories":[14407],"tags":[],"class_list":["post-51332","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-de-sites-pt"],"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>Introdu\u00e7\u00e3o \u00e0 Propriedade Transform do CSS - DreamHost Blog<\/title>\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\/pt\/transformacao-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introdu\u00e7\u00e3o \u00e0 Propriedade Transform do CSS\" \/>\n<meta property=\"og:description\" content=\"Eleve seu site a novos patamares desbloqueando o potencial da transforma\u00e7\u00e3o CSS. Estas dicas pr\u00e1ticas ajudar\u00e3o voc\u00ea a implementar valores de transforma\u00e7\u00e3o CSS como um profissional.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/\" \/>\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-26T19:42:39+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":"Introdu\u00e7\u00e3o \u00e0 Propriedade Transform do CSS - DreamHost Blog","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\/pt\/transformacao-css\/","og_locale":"en_US","og_type":"article","og_title":"Introdu\u00e7\u00e3o \u00e0 Propriedade Transform do CSS","og_description":"Eleve seu site a novos patamares desbloqueando o potencial da transforma\u00e7\u00e3o CSS. Estas dicas pr\u00e1ticas ajudar\u00e3o voc\u00ea a implementar valores de transforma\u00e7\u00e3o CSS como um profissional.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/","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-26T19:42:39+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\/pt\/transformacao-css\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Introdu\u00e7\u00e3o \u00e0 Propriedade Transform do CSS","datePublished":"2024-06-12T14:00:00+00:00","dateModified":"2025-05-26T19:42:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/"},"wordCount":1813,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/#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 Sites"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/","name":"Introdu\u00e7\u00e3o \u00e0 Propriedade Transform do CSS - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/#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-26T19:42:39+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pt\/transformacao-css\/#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\/pt\/transformacao-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Introdu\u00e7\u00e3o \u00e0 Propriedade Transform do CSS"}]},{"@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":"pt","translations":{"pt":51332,"es":47158,"en":47128,"pl":51292,"de":51335,"ru":51341,"uk":51353,"it":67918,"fr":69473,"nl":69501},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51332","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=51332"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51332\/revisions"}],"predecessor-version":[{"id":59451,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51332\/revisions\/59451"}],"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=51332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=51332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=51332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}