{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-transform/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"55d1d72f-10ef-56b1-a7b2-18688a68223b","title":"Tailwind CSS Transform","slug":"/classes/tailwind-transform/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"16 May 2024\",\n  \"title\": \"Tailwind CSS Transform\",\n  \"metaTitle\": \"Tailwind CSS Transform\",\n  \"metaDescription\": \"The transform utility class in Tailwind CSS allows you to apply various transformation effects to elements.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-transform\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Transform\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transform\"), \" utility class in Tailwind CSS allows you to apply various transformation effects to elements. With Tailwind's transform class, you can easily rotate, scale, translate, or skew elements to create visually appealing designs.\"), mdx(\"h2\", null, \"Applying Transformations\"), mdx(\"p\", null, \"To apply a transformation effect to an element, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transform-{type}-{value}\"), \" utility class. The {type} represents the type of transformation, and the {value} represents the degree, scale factor, or offset for the transformation. Here are some common transformation types:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"rotate-{angle}: Rotates the element by the specified {angle} in degrees. For example, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transform-rotate-45\"), \" rotates the element by 45 degrees.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"scale-{factor}: Scales the element by the specified {factor}. For example, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transform-scale-125\"), \" scales the element to 125% of its original size.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"translate-x-{value}: Translates the element horizontally by the specified {value}. For example, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transform-translate-x-2\"), \" moves the element 2 rem to the right.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"translate-y-{value}: Translates the element vertically by the specified {value}. For example, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transform-translate-y-[-4]\"), \" moves the element 4 rem upward.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"skew-x-{angle}: Skews the element along the x-axis by the specified {angle} in degrees. For example, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transform-skew-x-[-10]\"), \" skews the element by -10 degrees along the x-axis.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"skew-y-{angle}: Skews the element along the y-axis by the specified {angle} in degrees. For example, \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"transform-skew-y-6\"), \" skews the element by 6 degrees along the y-axis.\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"transform rotate-45..\\\"></div>\\n<div class=\\\"transform skew-y-12..\\\"></div>\\n<div class=\\\"transform translate-x-4 translate-y-3..\\\"></div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-purple-100 p-8\"\n  }, mdx(\"div\", {\n    className: \"flex flex-row justify-around gap-2 md:flex-row md:space-y-0 md:space-x-12\"\n  }, mdx(\"div\", {\n    className: \"w-16 h-16 bg-purple-400 transform rotate-45 translate-x-2/3\"\n  }), mdx(\"div\", {\n    className: \"w-16 h-16 bg-purple-400\"\n  }, mdx(\"div\", {\n    className: \"w-16 h-16 bg-yellow-400 transform skew-y-12\"\n  })), mdx(\"div\", {\n    className: \"w-16 h-16 bg-purple-400\"\n  }, mdx(\"div\", {\n    className: \"w-16 h-16 bg-yellow-400 transform translate-x-4 translate-y-3\"\n  })))), mdx(\"h2\", null, \"Responsive Transformations\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply transformation classes responsively at different breakpoints. To use responsive transformation classes, you can append the breakpoint prefix to the utility class. For example, md:transform-rotate-45 applies the rotation transformation starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"transform rotate-45 md:transform-rotate-90\\\">\\n  Hello World\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the rotation transformation is applied to the element by default (rotate-45), but starting from the medium breakpoint and above, the rotation is changed to rotate-90.\"), mdx(\"h2\", null, \"Tailwind Transform Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transform\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-translate-x:0; \", mdx(\"br\", null), \"--tw-translate-y: 0; \", mdx(\"br\", null), \"--tw-rotate: 0; \", mdx(\"br\", null), \"--tw-skew-x: 0; \", mdx(\"br\", null), \"--tw-skew-y: 0; \", mdx(\"br\", null), \"--tw-scale-x: 1; \", mdx(\"br\", null), \"--tw-scale-y: 1;\", mdx(\"br\", null), \"transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) \", mdx(\"br\", null), \"rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transform-gpu\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;\", mdx(\"br\", null), \"transform: translate3d(var(--tw-translate-x), \", mdx(\"br\", null), \" var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) \", mdx(\"br\", null), \" scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transform-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transform: none\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=header16\"\n  }, \"landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-transform","title":"Tailwind Transform","items":[{"url":"#applying-transformations","title":"Applying Transformations"},{"url":"#preview","title":"Preview"},{"url":"#responsive-transformations","title":"Responsive Transformations"},{"url":"#tailwind-transform-class-table","title":"Tailwind Transform Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-transform.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Transform","lastUpdated":"16 May 2024","metaDescription":"The transform utility class in Tailwind CSS allows you to apply various transformation effects to elements."}}},"pageContext":{"id":"55d1d72f-10ef-56b1-a7b2-18688a68223b"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}