{"id":14243,"date":"2019-07-11T23:43:50","date_gmt":"2019-07-11T15:43:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14243"},"modified":"2025-04-24T17:21:02","modified_gmt":"2025-04-24T09:21:02","slug":"css3-2d-transformation","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/","title":{"rendered":"A Look Into: CSS3 2D Transformations"},"content":{"rendered":"<p>The <strong>Transformation module<\/strong>, a tremendous addition in <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\" rel=\"noopener noreferrer\" target=\"_blank\">CSS3<\/a>, takes the way we manipulate elements on a website to the next level.<\/p>\n<p>While some experiments are truly amazing, we are not going to build something like a <a href=\"https:\/\/www.hongkiat.com\/blog\/coding-graphics-with-css3\/\" rel=\"noopener noreferrer\" target=\"_blank\">CSS-only<\/a> icon that can somehow <a href=\"https:\/\/www.hongkiat.com\/blog\/transformers-the-movie-artworks\/\" rel=\"noopener noreferrer\" target=\"_blank\">transform into an Autobot<\/a>, as it might be overwhelming and not quite usable in real life.<\/p>\n<p>Instead, this time, we will step back and review the basics of CSS3 2D Transformations to see how they work at a fundamental level.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\" class=\"ref-block__link\" title=\"Read More: Beginner\u2019s Guide to CSS3 (Updated)\" rel=\"bookmark\"><span class=\"screen-reader-text\">Beginner\u2019s Guide to CSS3 (Updated)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/beginners-guide-to-css3.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-9497 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/beginners-guide-to-css3.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Beginner\u2019s Guide to CSS3 (Updated)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tSince its announcement back in 2005, the development of Cascading Style Sheet (CSS) level 3, or better known...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>The Syntax<\/h2>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-transforms\/\">CSS3 Transformations<\/a> module basically allows us to transform an element to a certain extent, such as translating, scaling, rotating, and skewing.<\/p>\n<p>The official syntax is <code>transform:method(value)<\/code>. However, like other <a href=\"https:\/\/www.hongkiat.com\/blog\/beginners-guide-to-css3\/\" rel=\"noopener noreferrer\" target=\"_blank\">great CSS3 additions<\/a> still in the early stages, current browsers need the prefixed syntax version to run the transformations. So, the complete syntax looks like this:<\/p>\n<pre><code>transform: method(value);         \/* W3C Official Syntax *\/\n-o-transform: method(value);      \/* Opera 10.5+ *\/\n-ms-transform: method(value);     \/* Internet Explorer 9.0+ *\/\n-moz-transform: method(value);    \/* Firefox 3.6+ *\/\n-webkit-transform: method(value); \/* Chrome \/ Safari 3.2+ *\/<\/code><\/pre>\n<p>Also, the method we are referring to above is the <code>transform-functions<\/code>, which can be replaced with one of the following: <code>translate()<\/code>, <code>scale()<\/code>, <code>rotate()<\/code>, or <code>skew()<\/code>.<\/p>\n<h2>The Value<\/h2>\n<p>Most method values correspond to the <strong>X-axis<\/strong> and <strong>Y-axis<\/strong>. If you remember the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Cartesian_coordinate_system\">Cartesian coordinates system<\/a> from your Math class, the basic principle is similar: the X-axis represents the <strong>horizontal<\/strong> line, and the Y-axis represents the <strong>vertical<\/strong> line.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Cartesian coordinates system graph\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/cartesian.jpg\" width=\"500\"><\/figure>\n<p>Rotations are an exception. Rotation uses <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Polar_coordinate_system\">polar coordinates<\/a>, which are expressed in degrees ranging from 0 to 360.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Polar coordinates system graph\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/polar.jpg\" width=\"500\"><\/figure>\n<p>The values for all methods can be positive or negative. Note, however, that web pages are read sequentially from top to bottom, which makes the Y-axis in web coordinates work opposite to the standard Cartesian principle. This means adding a negative value to the <strong>Y-axis<\/strong> will move the element upwards.<\/p>\n<h2>Using the Transformations<\/h2>\n<p>Now, let\u2019s look at the following basic demonstration to see Transformation in action.<\/p>\n<h4>1. Translate<\/h4>\n<p>Don\u2019t be confused by the term <strong>translate<\/strong>; it doesn\u2019t refer to translating foreign languages. The <code>translate<\/code> method here moves elements in a specific direction.<\/p>\n<p>The method contains two values: <strong>X<\/strong> and <strong>Y<\/strong>. The <strong>X value<\/strong>, as pointed out above, moves the element horizontally (<strong>left or right<\/strong>), while the <strong>Y value<\/strong> moves it vertically (<strong>bottom or top<\/strong>).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"Web coordinates system diagram\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/coordinates-web.jpg\" width=\"500\"><\/figure>\n<p>Now, let\u2019s see some simple demonstrations below:<\/p>\n<pre><code>div {\n  width: 100px;\n  height: 100px;\n  transform: translate(100px, 250px);\n}<\/code><\/pre>\n<p>The snippet above moves the element 100px to the right and 250px to the bottom.<\/p>\n<pre><code>div {\n  width: 100px;\n  height: 100px;\n  transform: translate(100px, 0);\n}<\/code><\/pre>\n<p>The snippet above moves the element 100px to the right, as the Y-axis is zeroed. To move the element to the left, set the X-axis to a negative value, as follows:<\/p>\n<pre><code>div {\n  width: 100px;\n  height: 100px;\n  transform: translate(-100px, 0);\n}<\/code><\/pre>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/demo\/index.html#translate\">\u201cTranslate\u201d demo<\/a>\n<\/div>\n<p>Alternatively, we can move the element in a single direction using these individual methods: <code>translateX()<\/code> and <code>translateY()<\/code>. The difference is that each of these methods accepts only one value.<\/p>\n<p>So, practically speaking, <code>transform: translate(-100px, 0)<\/code> is equivalent to <code>transform: translateX(-100px)<\/code>.<\/p>\n<h4>2. Scale<\/h4>\n<p>The <code>scale<\/code> method allows us to <strong>enlarge or reduce<\/strong> elements from their original size. The scale\u2019s value structure is the same as the <code>translate<\/code> method; it contains X and Y values, but we don\u2019t specify units. Here is an example:<\/p>\n<pre><code>div {\n  width: 100px;\n  height: 100px;\n  transform: scale(1.5);\n}<\/code><\/pre>\n<p>The example above enlarges the <code>div<\/code> to 1.5 times or <strong>150%<\/strong> <strong>of its original size<\/strong>. Since we scale it equally for both the X and Y directions, we only need to declare one value. You can also declare it as <code>transform: scale(1.5, 1.5);<\/code> for more detail; it achieves the same result.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS scale transformation example\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/scale.jpg\" width=\"500\"><\/figure>\n<p>Furthermore, if we want to reduce the element, we use a value between 0 and 1 (e.g., 0.999 down to values slightly above 0). The example below reduces the size of the div by 50%:<\/p>\n<pre><code>div {\n  width: 100px;\n  height: 100px;\n  transform: scale(0.5);\n}<\/code><\/pre>\n<p>However, be cautious: if you set the value to absolute \u201c0\u201d, the <code>div<\/code> will disappear. Unless you have a valid reason, this is not recommended.<\/p>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/demo\/index.html#scale\">\u201cScale\u201d demo<\/a>\n<\/div>\n<h4>3. Rotate<\/h4>\n<p>As mentioned earlier, the <code>rotate<\/code> method uses polar coordinates, so the value is stated in degrees. Here are two examples:<\/p>\n<p>The snippet below rotates the <code>div<\/code> 30 degrees clockwise.<\/p>\n<pre><code>div {\n  width: 100px;\n  height: 100px;\n  transform: rotate(30deg);\n}<\/code><\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS rotate transformation example\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/rotate.jpg\" width=\"500\"><\/figure>\n<p>A negative value, as illustrated below, rotates the <code>div<\/code> in the opposite direction (counter-clockwise) by the same degree.<\/p>\n<pre><code>div {\n  width: 100px;\n  height: 100px;\n  transform: rotate(-30deg);\n}<\/code><\/pre>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/demo\/index.html#rotate\">\u201cRotate\u201d demo<\/a>\n<\/div>\n<h4>4. Skew<\/h4>\n<p>The <code>skew<\/code> method enables us to create a parallelogram. It also accepts two values for the X and Y-axis. However, the values are stated in degrees, unlike the linear measurements used for the <code>scale<\/code> or <code>translate<\/code> methods. Here is an example:<\/p>\n<pre><code>div {\n  width: 200px;\n  height: 100px;\n  transform: skew(30deg, 10deg);\n}<\/code><\/pre>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/demo\/index.html#skew\">\u201cSkew\u201d demo<\/a>\n<\/div>\n<h4>5. Multiple method<\/h4>\n<p>The <code>transform<\/code> property is not limited to handling only one method; in fact, we can include multiple methods in a single declaration, like this:<\/p>\n<pre><code>div {\n  width: 100px;\n  height: 100px;\n  transform: translateX(100px) rotate(45deg);\n}<\/code><\/pre>\n<p>The snippet above moves the element 100px to the right and simultaneously rotates it 45 degrees.<\/p>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/demo\/index.html#multiple\">\u201cMultiple Method\u201d demo<\/a>\n<\/div>\n<h2>Transform Origin<\/h2>\n<p>The <code>transform-origin<\/code> property \u2013 as its name implies \u2013 controls the starting point of the transformation. If this property is not explicitly declared using the syntax <code>transform-origin: X Y;<\/code>, the browser defaults to 50% for X and 50% for Y.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"CSS transform origin point\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/origin.jpg\" width=\"500\"><\/figure>\n<p>Now, if we specify the <code>transform-origin<\/code> to 0 (X) 0 (Y), the transformation starts at the top-left corner.<\/p>\n<p>Again, all browsers still need the prefixed version to invoke this property. Here is the complete version to ensure it works in most current browsers:<\/p>\n<pre><code>-webkit-transform-origin: X Y;\n-moz-transform-origin: X Y;\n-o-transform-origin: X Y;\n-ms-transform-origin: X Y;\ntransform-origin: X Y;<\/code><\/pre>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/demo\/index.html#origin\">\u201cTransform-origin\u201d demo<\/a>\n<\/div>\n<h2>Conclusion<\/h2>\n<p>We have covered the four essential transformation methods: translate, scale, rotate, and skew.<\/p>\n<p>However, as mentioned, this module is still in its early stages. If you apply these methods on your website, ensure it degrades gracefully for <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/transforms2d\">incompatible browsers<\/a> (not referring to IE6 here).<\/p>\n<p>Lastly, you can view the demo or download the source from the following links.<\/p>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/demo\/index.html\">Demo<\/a>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/demo\/source.zip\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The Transformation module, a tremendous addition in CSS3, takes the way we manipulate elements on a website to the next level. While some experiments are truly amazing, we are not going to build something like a CSS-only icon that can somehow transform into an Autobot, as it might be overwhelming and not quite usable in&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,506,2016],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS3 2D Transformations - Hongkiat<\/title>\n<meta name=\"description\" content=\"The Transformation module, a tremendous addition in CSS3, takes the way we manipulate elements on a website to the next level. While some experiments are\" \/>\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.hongkiat.com\/blog\/css3-2d-transformation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Look Into: CSS3 2D Transformations\" \/>\n<meta property=\"og:description\" content=\"The Transformation module, a tremendous addition in CSS3, takes the way we manipulate elements on a website to the next level. While some experiments are\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-11T15:43:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:21:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/cartesian.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"A Look Into: CSS3 2D Transformations\",\"datePublished\":\"2019-07-11T15:43:50+00:00\",\"dateModified\":\"2025-04-24T09:21:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/\"},\"wordCount\":843,\"commentCount\":17,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-2d-transformation\\\/cartesian.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/\",\"name\":\"CSS3 2D Transformations - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-2d-transformation\\\/cartesian.jpg\",\"datePublished\":\"2019-07-11T15:43:50+00:00\",\"dateModified\":\"2025-04-24T09:21:02+00:00\",\"description\":\"The Transformation module, a tremendous addition in CSS3, takes the way we manipulate elements on a website to the next level. While some experiments are\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-2d-transformation\\\/cartesian.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-2d-transformation\\\/cartesian.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-2d-transformation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Look Into: CSS3 2D Transformations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS3 2D Transformations - Hongkiat","description":"The Transformation module, a tremendous addition in CSS3, takes the way we manipulate elements on a website to the next level. While some experiments are","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.hongkiat.com\/blog\/css3-2d-transformation\/","og_locale":"en_US","og_type":"article","og_title":"A Look Into: CSS3 2D Transformations","og_description":"The Transformation module, a tremendous addition in CSS3, takes the way we manipulate elements on a website to the next level. While some experiments are","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-07-11T15:43:50+00:00","article_modified_time":"2025-04-24T09:21:02+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/cartesian.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"A Look Into: CSS3 2D Transformations","datePublished":"2019-07-11T15:43:50+00:00","dateModified":"2025-04-24T09:21:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/"},"wordCount":843,"commentCount":17,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/cartesian.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/","name":"CSS3 2D Transformations - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/cartesian.jpg","datePublished":"2019-07-11T15:43:50+00:00","dateModified":"2025-04-24T09:21:02+00:00","description":"The Transformation module, a tremendous addition in CSS3, takes the way we manipulate elements on a website to the next level. While some experiments are","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/cartesian.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-2d-transformation\/cartesian.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-2d-transformation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"A Look Into: CSS3 2D Transformations"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3HJ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=14243"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14243\/revisions"}],"predecessor-version":[{"id":74128,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/14243\/revisions\/74128"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=14243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=14243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=14243"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=14243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}