{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-transform-origin/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"251cdd02-ad81-5a0d-855a-61177a3483a9","title":"Tailwind CSS Transform Origin","slug":"/classes/tailwind-transform-origin/"},"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\": \"20 May 2024\",\n \"title\": \"Tailwind CSS Transform Origin\",\n \"metaTitle\": \"Tailwind CSS Transform Origin\",\n \"metaDescription\": \"The transform-origin utility class in Tailwind CSS allows you to specify the origin point of a transformation applied to an element.\",\n \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-transform-origin\"\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 Origin\"), mdx(\"p\", null, \"The transform-origin utility class in Tailwind CSS allows you to specify the origin point of a transformation applied to an element. The origin point determines the reference point around which the transformation occurs, such as rotation, scaling, or skewing.\"), mdx(\"h2\", null, \"Setting the Transform Origin\"), mdx(\"p\", null, \"To set the transform origin of an element, you can use the origin-{value} utility class, where {value} represents the desired origin point. The available values include center, top, right, bottom, left, top-right, top-left, bottom-right, and bottom-left, providing flexibility in positioning the origin point.\"), mdx(\"p\", null, \"Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n \\n
\\n\\n \\n
\\n\\n \\n
\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n \"className\": \"rounded-t-xl overflow-hidden bg-purple-100 p-10\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"flex flex-row justify-around space-x-12 md:flex-col md:space-y-0 md:space-x-12\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 bg-purple-400 rounded-md\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 origin-center transform rotate-12 rounded-md\",\n \"src\": \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80\"\n }), \"\\n \"), \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 bg-purple-400 rounded-md\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 origin-top-left transform rotate-45 rounded-md\",\n \"src\": \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80\"\n }), \"\\n \"), \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 bg-purple-400 rounded-md\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 origin-top-right transform rotate-12 rounded-md\",\n \"src\": \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80\"\n }), \"\\n \"), \"\\n \")), mdx(\"h2\", null, \"Responsive Transform Origins\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply transform origins responsively at different breakpoints. To use responsive transform origin classes, you can append the breakpoint prefix to the utility class. For example, md:origin-center sets the transform origin to the center of the element starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n \\n
\\n\")), mdx(\"p\", null, \"In the above example, the element has a transform origin of the center, but starting from the medium breakpoint and above, it changes to the top right corner.\"), mdx(\"h2\", null, \"Combining Transform Origins\"), mdx(\"p\", null, \"You can combine transform origins with other transformation utility classes in Tailwind CSS to achieve more complex visual effects. For example, you can combine the origin class with the rotate class to set the transform origin and apply a rotation:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n \"className\": \"rounded-t-xl overflow-hidden bg-indigo-100 p-10\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"flex flex-row justify-around space-x-12 md:flex-col md:space-y-0 md:space-x-12\"\n }, \"\\n \", mdx(\"div\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 bg-indigo-400 rounded-md\"\n }, \"\\n \", mdx(\"img\", {\n parentName: \"div\",\n \"className\": \"w-24 h-24 origin-center rotate-45 rounded-md\",\n \"src\": \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=256&q=80\"\n }), \"\\n \"), \"\\n \")), mdx(\"p\", null, \"In the above example, the element has a transform origin set to the center and is rotated by 45 degrees.\"), mdx(\"h2\", null, \"Tailwind Transform Origin 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 }, \"origin-center\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: center;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"origin-top\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: top;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"origin-top-right\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: top right;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"origin-right\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: right;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"origin-bottom-right\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: bottom right;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"origin-bottom\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: bottom;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"origin-bottom-left\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: bottom left;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"origin-left\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: left;\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"origin-top-left\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"transform-origin: top left;\")))), 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-origin","title":"Tailwind Transform Origin","items":[{"url":"#setting-the-transform-origin","title":"Setting the Transform Origin"},{"url":"#preview","title":"Preview"},{"url":"#responsive-transform-origins","title":"Responsive Transform Origins"},{"url":"#combining-transform-origins","title":"Combining Transform Origins"},{"url":"#preview-1","title":"Preview"},{"url":"#tailwind-transform-origin-class-table","title":"Tailwind Transform Origin Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-transform-origin.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Transform Origin","lastUpdated":"20 May 2024","metaDescription":"The transform-origin utility class in Tailwind CSS allows you to specify the origin point of a transformation applied to an element."}}},"pageContext":{"id":"251cdd02-ad81-5a0d-855a-61177a3483a9"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}