{"id":13805328,"url":"https://github.com/sambauers/tailwindcss-3d","last_synced_at":"2025-05-15T08:04:42.686Z","repository":{"id":65389675,"uuid":"591236452","full_name":"sambauers/tailwindcss-3d","owner":"sambauers","description":"Add 3D transforms to your TailwindCSS project","archived":false,"fork":false,"pushed_at":"2025-04-11T19:02:08.000Z","size":1367,"stargazers_count":287,"open_issues_count":8,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-14T13:07:36.506Z","etag":null,"topics":["tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sambauers.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-01-20T08:58:49.000Z","updated_at":"2025-04-12T07:02:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"ab202415-8a33-46cf-8b5a-98cb6b400ba8","html_url":"https://github.com/sambauers/tailwindcss-3d","commit_stats":{"total_commits":247,"total_committers":5,"mean_commits":49.4,"dds":"0.28744939271255066","last_synced_commit":"0f489c0577c2f28b35517c92ecaa6e7a024e4ef5"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sambauers%2Ftailwindcss-3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sambauers%2Ftailwindcss-3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sambauers%2Ftailwindcss-3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sambauers%2Ftailwindcss-3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sambauers","download_url":"https://codeload.github.com/sambauers/tailwindcss-3d/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301422,"owners_count":22047901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailwind","tailwind-css","tailwindcss","tailwindcss-plugin"],"created_at":"2024-08-04T01:01:00.108Z","updated_at":"2025-05-15T08:04:42.620Z","avatar_url":"https://github.com/sambauers.png","language":"TypeScript","readme":"# 3D Plugin for Tailwind CSS\n\n[![NPM package version](https://img.shields.io/npm/v/tailwindcss-3d?style=flat\u0026logoColor=white\u0026labelColor=gray\u0026color=black\u0026logo=npm\u0026label=Package%20version)](https://www.npmjs.com/package/tailwindcss-3d)\n[![Lint with ESLint](https://img.shields.io/github/actions/workflow/status/sambauers/tailwindcss-3d/lint-eslint.yml?style=flat\u0026logoColor=white\u0026labelColor=gray\u0026color=black\u0026logo=eslint\u0026label=Lint)](https://github.com/sambauers/tailwindcss-3d/actions/workflows/lint-eslint.yml)\n[![Tests with Jest](https://img.shields.io/github/actions/workflow/status/sambauers/tailwindcss-3d/test-jest.yml?style=flat\u0026logoColor=white\u0026labelColor=gray\u0026color=black\u0026logo=jest\u0026label=Tests)](https://github.com/sambauers/tailwindcss-3d/actions/workflows/test-jest.yml)\n[![Test Coverage on Codecov](https://img.shields.io/codecov/c/github/sambauers/tailwindcss-3d?style=flat\u0026logoColor=white\u0026labelColor=gray\u0026color=black\u0026logo=codecov\u0026label=Test%20coverage)](https://app.codecov.io/gh/sambauers/tailwindcss-3d)\n\nAdd 3D transforms to your TailwindCSS project.\n\n## TailwindCSS v4 compatibility\n\nTailwindCSS v4 has been released with native 3D transform utilities. This\nplugin will not be redeveloped to work with v4.\n\nMaintenance of this plugin will continue for a while for v3 users.\n\n## Description\n\n3D Plugin for Tailwind CSS adds additional transform utilities and animations\nwhich can help you to add three dimensional styling to your interface.\n\nBy default TailwindCSS adds transforms in two dimensions (\"x\" and \"y\" axis\nonly), so scale, rotate, and translate are flat transformations. This plugin\nadds support for the \"z\" axis and implements extensions to the bounce and spin\nanimations to allow them to operate in multiple directions.\n\nTailwind's core implementation uses the\n[`transform` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)\nto achieve all transformations. This method is better supported by older\nbrowsers, but has some limitations which make it more difficult to use.\n\nThis plugin implements transformation using newer CSS properties like\n[`rotate`](https://developer.mozilla.org/en-US/docs/Web/CSS/rotate),\n[`translate`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate),\nand [`scale`](https://developer.mozilla.org/en-US/docs/Web/CSS/scale)\nwhere support in more recent browsers allows. This opens some new possibilities\nwhen combining utility classes with animations, and in the composition of new\nanimations.\n\n## Browser compatibility\n\nSince this plugin uses newer CSS properties, it will produce CSS which is not\ncompatible with some older browsers.\n\nRefer to [this list of CSS features on CanIUse.com](https://caniuse.com/?feats=mdn-css_properties_rotate,mdn-css_properties_scale,mdn-css_properties_translate,mdn-css_properties_perspective,mdn-css_properties_perspective-origin,mdn-css_properties_backface-visibility,mdn-css_properties_transform-box,mdn-css_properties_transform-style,transforms2d,transforms3d)\n\nIf you want to support older browsers, you can use `legacy` mode.\n\n## Installation\n\nInstall the plugin using npm or your preferred package manager:\n\n```sh\n# npm\nnpm install -D tailwindcss-3d\n\n# yarn\nyarn add -D tailwindcss-3d\n\n# pnpm\npnpm add -D tailwindcss-3d\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-3d'),\n    // ...\n  ],\n}\n```\n\nTurn on `legacy` mode to support older browsers like this:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-3d')({ legacy: true }),\n    // ...\n  ],\n}\n```\n\nAll configuration of utility values is done via theme configuration in your\n`tailwind.config.js` file.\n\nAppropriate theme configuration points are indicated under each utility below.\n\nHere is an example of extending the available rotation values to add a 30 degree\nand a 60 degree rotation value on all axes:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      rotate: {\n        '30': '30deg',\n        '60': '60deg',\n      },\n    },\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-3d'),\n    // ...\n  ],\n}\n```\n\nFor more information about extending your theme, see the relevant\n[Tailwind documentation](https://tailwindcss.com/docs/theme#customizing-the-default-theme).\n\n## Usage\n\n### A note on coordinates\n\n\"y\" axis values in the CSS coordinate system can be a bit confusing at first.\nThe origin of the coordinate system, where `x = 0, y = 0` in two-dimensional\nspace is the top-left of the browser window. From there, positive values of \"x\"\nare to the right as expected, but positive values of \"y\" are in the downward\ndirection from that point. This is the opposite of common usage in other\ncontexts like maths and construction.\n\nThe effect of this is felt most when translating elements which are in the\nmiddle of a page, and also in the case of this plugin when applying directions\nto animations.\n\n### Utilities\n\n#### scale\n\n[Tailwind Play scale utility examples](https://play.tailwindcss.com/IzMFd64IOn)\n\n| Class.      | Properties            |\n| ----------- | --------------------- |\n| scale-x-0   | scale: 0 … …          |\n| scale-y-0   | scale: … 0 …          |\n| scale-z-0   | scale: … … 0          |\n| scale-0     | scale: 0 0 …          |\n| scale3d-0   | scale: 0 0 0          |\n| scale-x-50  | scale: .5 … …         |\n| scale-y-50  | scale: … .5 …         |\n| scale-z-50  | scale: … … .5         |\n| scale-50    | scale: .5 .5 …        |\n| scale3d-50  | scale: .5 .5 .5       |\n| scale-x-75  | scale: .75 … …        |\n| scale-y-75  | scale: … .75 …        |\n| scale-z-75  | scale: … … .75        |\n| scale-75    | scale: .75 .75 …      |\n| scale3d-75  | scale: .75 .75 .75    |\n| scale-x-90  | scale: .9 … …         |\n| scale-y-90  | scale: … .9 …         |\n| scale-z-90  | scale: … … .9         |\n| scale-90    | scale: .9 .9 …        |\n| scale3d-90  | scale: .9 .9 .9       |\n| scale-x-95  | scale: .95 … …        |\n| scale-y-95  | scale: … .95 …        |\n| scale-z-95  | scale: … … .95        |\n| scale-95    | scale: .95 .95 …      |\n| scale3d-95  | scale: .95 .95 .95    |\n| scale-x-100 | scale: 1 … …          |\n| scale-y-100 | scale: … 1 …          |\n| scale-z-100 | scale: … … 1          |\n| scale-100   | scale: 1 1 …          |\n| scale3d-100 | scale: 1 1 1          |\n| scale-x-105 | scale: 1.05 … …       |\n| scale-y-105 | scale: … 1.05 …       |\n| scale-z-105 | scale: … … 1.05       |\n| scale-105   | scale: 1.05 1.05 …    |\n| scale3d-105 | scale: 1.05 1.05 1.05 |\n| scale-x-110 | scale: 1.1 … …        |\n| scale-y-110 | scale: … 1.1 …        |\n| scale-z-110 | scale: … … 1.1        |\n| scale-110   | scale: 1.1 1.1 …      |\n| scale3d-110 | scale: 1.1 1.1 1.1    |\n| scale-x-125 | scale: 1.25 … …       |\n| scale-y-125 | scale: … 1.25 …       |\n| scale-z-125 | scale: … … 1.25       |\n| scale-125   | scale: 1.25 1.25 …    |\n| scale3d-125 | scale: 1.25 1.25 1.25 |\n| scale-x-150 | scale: 1.5 … …        |\n| scale-y-150 | scale: … 1.5 …        |\n| scale-z-150 | scale: … … 1.5        |\n| scale-150   | scale: 1.5 1.5 …      |\n| scale3d-150 | scale: 1.5 1.5 1.5    |\n\nInherits values from `theme.scale` in your config.\n\nScaling in one dimension:\n\n```html\n\u003c!-- scale on x-axis 50% --\u003e\n\u003cdiv class=\"scale-x-50\"\u003e\n\n\u003c!-- scale on y-axis 75% --\u003e\n\u003cdiv class=\"scale-y-75\"\u003e\n\n\u003c!-- scale on z-axis 110% --\u003e\n\u003cdiv class=\"scale-z-110\"\u003e\n```\n\nYou can mix scaling values together as well:\n\n```html\n\u003c!-- scale on y-axis 75% and z-axis 95% --\u003e\n\u003cdiv class=\"scale-y-75 scale-z-95\"\u003e\u003c/div\u003e\n```\n\nArbitrary values:\n\n```html\n\u003c!-- scale on y-axis 30% --\u003e\n\u003cdiv class=\"scale-y-[0.3]\"\u003e\u003c/div\u003e\n\n```\n\nScale on both x and y-axis in proportion:\n\n```html\n\u003c!-- scale on x-axis and y-axis 50% --\u003e\n\u003cdiv class=\"scale-50\"\u003e\n```\n\nScale all three dimensions in proportion:\n\n```html\n\u003c!-- scale on x-axis, y-axis and z-axis 150% --\u003e\n\u003cdiv class=\"scale3d-150\"\u003e\n```\n\n#### rotate\n\n[Tailwind Play rotate utility examples](https://play.tailwindcss.com/m1NO5HFfGx)\n\n| Class        | Properties                  |\n| ------------ | --------------------------- |\n| rotate-x-0   | transform: rotateX(0deg);   |\n| rotate-y-0   | transform: rotateY(0deg);   |\n| rotate-z-0   | rotate: 0deg;               |\n| rotate-0     | rotate: 0deg;               |\n| rotate-x-1   | transform: rotateX(1deg);   |\n| rotate-y-1   | transform: rotateY(1deg);   |\n| rotate-z-1   | rotate: 1deg;               |\n| rotate-1     | rotate: 1deg;               |\n| rotate-x-2   | transform: rotateX(2deg);   |\n| rotate-y-2   | transform: rotateY(2deg);   |\n| rotate-z-2   | rotate: 2deg;               |\n| rotate-2     | rotate: 2deg;               |\n| rotate-x-3   | transform: rotateX(3deg);   |\n| rotate-y-3   | transform: rotateY(3deg);   |\n| rotate-z-3   | rotate: 3deg;               |\n| rotate-3     | rotate: 3deg;               |\n| rotate-x-6   | transform: rotateX(6deg);   |\n| rotate-y-6   | transform: rotateY(6deg);   |\n| rotate-z-6   | rotate: 6deg;               |\n| rotate-6     | rotate: 6deg;               |\n| rotate-x-12  | transform: rotateX(12deg);  |\n| rotate-y-12  | transform: rotateY(12deg);  |\n| rotate-z-12  | rotate: 12deg;              |\n| rotate-12    | rotate: 12deg;              |\n| rotate-x-45  | transform: rotateX(45deg);  |\n| rotate-y-45  | transform: rotateY(45deg);  |\n| rotate-z-45  | rotate: 45deg;              |\n| rotate-45    | rotate: 45deg;              |\n| rotate-x-90  | transform: rotateX(90deg);  |\n| rotate-y-90  | transform: rotateY(90deg);  |\n| rotate-z-90  | rotate: 90deg;              |\n| rotate-90    | rotate: 90deg;              |\n| rotate-x-180 | transform: rotateX(180deg); |\n| rotate-y-180 | transform: rotateY(180deg); |\n| rotate-z-180 | rotate: 180deg;             |\n| rotate-180   | rotate: 180deg;             |\n\nInherits values from `theme.rotate` in your config.\n\nRotating around x-axis and y-axis:\n\n```html\n\u003c!-- rotate along x-axis 45 degrees --\u003e\n\u003cdiv class=\"rotate-x-45\"\u003e\u003c/div\u003e\n\n\u003c!-- rotate along y-axis 12 degrees --\u003e\n\u003cdiv class=\"rotate-y-12\"\u003e\u003c/div\u003e\n```\n\nZ-axis rotation is still the default, so the following are equivalent to each\nother:\n\n```html\n\u003c!-- rotate along z-axis 45 degrees --\u003e\n\u003cdiv class=\"rotate-45\"\u003e\u003c/div\u003e\n\n\u003c!-- rotate along z-axis 45 degrees --\u003e\n\u003cdiv class=\"rotate-z-45\"\u003e\u003c/div\u003e\n```\n\nArbitrary values:\n\n```html\n\u003c!-- rotate along y-axis 30 degrees --\u003e\n\u003cdiv class=\"rotate-y-[30deg]\"\u003e\u003c/div\u003e\n```\n\nYou can mix rotation values together as well:\n\n```html\n\u003c!-- rotate along y-axis 12 degrees and z-axis 45 degrees --\u003e\n\u003cdiv class=\"rotate-y-12 rotate-z-45\"\u003e\u003c/div\u003e\n```\n\n#### translate\n\n[Tailwind Play translate utility examples](https://play.tailwindcss.com/5O5nybIKRJ)\n\n| Class            | Properties                 |\n| ---------------- | -------------------------- |\n| translate-x-0    | translate: 0px … …;        |\n| translate-y-0    | translate: … 0px …;        |\n| translate-z-0    | translate: … … 0px;        |\n| translate-x-px   | translate: 1px … …;        |\n| translate-y-px   | translate: … 1px …;        |\n| translate-z-px   | translate: … … 1px;        |\n| translate-x-0.5  | translate: 0.125rem … …;   |\n| translate-y-0.5  | translate: … 0.125rem …;   |\n| translate-z-0.5  | translate: … … 0.125rem;   |\n| translate-x-1    | translate: 0.25rem … …;    |\n| translate-y-1    | translate: … 0.25rem …;    |\n| translate-z-1    | translate: … … 0.25rem;    |\n| translate-x-1.5  | translate: 0.375rem … …;   |\n| translate-y-1.5  | translate: … 0.375rem …;   |\n| translate-z-1.5  | translate: … … 0.375rem;   |\n| translate-x-2    | translate: 0.5rem … …;     |\n| translate-y-2    | translate: … 0.5rem …;     |\n| translate-z-2    | translate: … … 0.5rem;     |\n| translate-x-2.5  | translate: 0.625rem … …;   |\n| translate-y-2.5  | translate: … 0.625rem …;   |\n| translate-z-2.5  | translate: … … 0.625rem;   |\n| translate-x-3    | translate: 0.75rem … …;    |\n| translate-y-3    | translate: … 0.75rem …;    |\n| translate-z-3    | translate: … … 0.75rem;    |\n| translate-x-3.5  | translate: 0.875rem … …;   |\n| translate-y-3.5  | translate: … 0.875rem …;   |\n| translate-z-3.5  | translate: … … 0.875rem;   |\n| translate-x-4    | translate: 1rem … …;       |\n| translate-y-4    | translate: … 1rem …;       |\n| translate-z-4    | translate: … … 1rem;       |\n| translate-x-5    | translate: 1.25rem … …;    |\n| translate-y-5    | translate: … 1.25rem …;    |\n| translate-z-5    | translate: … … 1.25rem;    |\n| translate-x-6    | translate: 1.5rem … …;     |\n| translate-y-6    | translate: … 1.5rem …;     |\n| translate-z-6    | translate: … … 1.5rem;     |\n| translate-x-7    | translate: 1.75rem … …;    |\n| translate-y-7    | translate: … 1.75rem …;    |\n| translate-z-7    | translate: … … 1.75rem;    |\n| translate-x-8    | translate: 2rem … …;       |\n| translate-y-8    | translate: … 2rem …;       |\n| translate-z-8    | translate: … … 2rem;       |\n| translate-x-9    | translate: 2.25rem … …;    |\n| translate-y-9    | translate: … 2.25rem …;    |\n| translate-z-9    | translate: … … 2.25rem;    |\n| translate-x-10   | translate: 2.5rem … …;     |\n| translate-y-10   | translate: … 2.5rem …;     |\n| translate-z-10   | translate: … … 2.5rem;     |\n| translate-x-11   | translate: 2.75rem … …;    |\n| translate-y-11   | translate: … 2.75rem …;    |\n| translate-z-11   | translate: … … 2.75rem;    |\n| translate-x-12   | translate: 3rem … …;       |\n| translate-y-12   | translate: … 3rem …;       |\n| translate-z-12   | translate: … … 3rem;       |\n| translate-x-14   | translate: 3.5rem … …;     |\n| translate-y-14   | translate: … 3.5rem …;     |\n| translate-z-14   | translate: … … 3.5rem;     |\n| translate-x-16   | translate: 4rem … …;       |\n| translate-y-16   | translate: … 4rem …;       |\n| translate-z-16   | translate: … … 4rem;       |\n| translate-x-20   | translate: 5rem … …;       |\n| translate-y-20   | translate: … 5rem …;       |\n| translate-z-20   | translate: … … 5rem;       |\n| translate-x-24   | translate: 6rem … …;       |\n| translate-y-24   | translate: … 6rem …;       |\n| translate-z-24   | translate: … … 6rem;       |\n| translate-x-28   | translate: 7rem … …;       |\n| translate-y-28   | translate: … 7rem …;       |\n| translate-z-28   | translate: … … 7rem;       |\n| translate-x-32   | translate: 8rem … …;       |\n| translate-y-32   | translate: … 8rem …;       |\n| translate-z-32   | translate: … … 8rem;       |\n| translate-x-36   | translate: 9rem … …;       |\n| translate-y-36   | translate: … 9rem …;       |\n| translate-z-36   | translate: … … 9rem;       |\n| translate-x-40   | translate: 10rem … …;      |\n| translate-y-40   | translate: … 10rem …;      |\n| translate-z-40   | translate: … … 10rem;      |\n| translate-x-44   | translate: 11rem … …;      |\n| translate-y-44   | translate: … 11rem …;      |\n| translate-z-44   | translate: … … 11rem;      |\n| translate-x-48   | translate: 12rem … …;      |\n| translate-y-48   | translate: … 12rem …;      |\n| translate-z-48   | translate: … … 12rem;      |\n| translate-x-52   | translate: 13rem … …;      |\n| translate-y-52   | translate: … 13rem …;      |\n| translate-z-52   | translate: … … 13rem;      |\n| translate-x-56   | translate: 14rem … …;      |\n| translate-y-56   | translate: … 14rem …;      |\n| translate-z-56   | translate: … … 14rem;      |\n| translate-x-60   | translate: 15rem … …;      |\n| translate-y-60   | translate: … 15rem …;      |\n| translate-z-60   | translate: … … 15rem;      |\n| translate-x-64   | translate: 16rem … …;      |\n| translate-y-64   | translate: … 16rem …;      |\n| translate-z-64   | translate: … … 16rem;      |\n| translate-x-72   | translate: 18rem … …;      |\n| translate-y-72   | translate: … 18rem …;      |\n| translate-z-72   | translate: … … 18rem;      |\n| translate-x-80   | translate: 20rem … …;      |\n| translate-y-80   | translate: … 20rem …;      |\n| translate-z-80   | translate: … … 20rem;      |\n| translate-x-96   | translate: 24rem … …;      |\n| translate-y-96   | translate: … 24rem …;      |\n| translate-z-96   | translate: … … 24rem;      |\n| translate-x-1/2  | translate: 50% … …;        |\n| translate-y-1/2  | translate: … 50% …;        |\n| translate-x-1/3  | translate: 33.333333% … …; |\n| translate-y-1/3  | translate: … 33.333333% …; |\n| translate-x-2/3  | translate: 66.666667% … …; |\n| translate-y-2/3  | translate: … 66.666667% …; |\n| translate-x-1/4  | translate: 25% … …;        |\n| translate-y-1/4  | translate: … 25% …;        |\n| translate-x-2/4  | translate: 50% … …;        |\n| translate-y-2/4  | translate: … 50% …;        |\n| translate-x-3/4  | translate: 75% … …;        |\n| translate-y-3/4  | translate: … 75% …;        |\n| translate-x-full | translate: 100% … …;       |\n| translate-y-full | translate: … 100% …;       |\n\nInherits values from `theme.translate` in your config.\n\nNote that translation on the z-axis can not use percentage values.\n\n#### skew\n\n| Class     | Properties               |\n| --------- | ------------------------ |\n| skew-x-0  | transform: skewX(0deg);  |\n| skew-y-0  | transform: skewY(0deg);  |\n| skew-x-1  | transform: skewX(1deg);  |\n| skew-y-1  | transform: skewY(1deg);  |\n| skew-x-2  | transform: skewX(2deg);  |\n| skew-y-2  | transform: skewY(2deg);  |\n| skew-x-3  | transform: skewX(3deg);  |\n| skew-y-3  | transform: skewY(3deg);  |\n| skew-x-6  | transform: skewX(6deg);  |\n| skew-y-6  | transform: skewY(6deg);  |\n| skew-x-12 | transform: skewX(12deg); |\n| skew-y-12 | transform: skewY(12deg); |\n\nInherits values from `theme.skew` in your config.\n\n#### perspective\n\n| Class            | Properties           |\n| ---------------- | -------------------- |\n| perspective-none | perspective: none;   |\n| perspective-250  | perspective: 250px;  |\n| perspective-500  | perspective: 500px;  |\n| perspective-750  | perspective: 750px;  |\n| perspective-1000 | perspective: 1000px; |\n\nInherits values from `theme.perspective` in your config.\n\n#### perspective-origin\n\n| Class                           | Properties                        |\n| ------------------------------- | --------------------------------- |\n| perspective-origin-center       | perspective-origin: center;       |\n| perspective-origin-top          | perspective-origin: top;          |\n| perspective-origin-top-right    | perspective-origin: top right;    |\n| perspective-origin-right        | perspective-origin: right;        |\n| perspective-origin-bottom-right | perspective-origin: bottom right; |\n| perspective-origin-bottom       | perspective-origin: bottom;       |\n| perspective-origin-bottom-left  | perspective-origin: bottom left;  |\n| perspective-origin-left         | perspective-origin: left;         |\n| perspective-origin-top-left     | perspective-origin: top left;     |\n\nInherits values from `theme.perspectiveOrigin` in your config.\n\n#### backface\n\n| Class            | Properties                    |\n| ---------------- | ----------------------------- |\n| backface-visible | backface-visibility: visible; |\n| backface-hidden  | backface-visibility: hidden;  |\n\nInherits values from `theme.backface` in your config.\n\n#### transform-box\n\n| Class                 | Properties                 |\n| --------------------- | -------------------------- |\n| transform-box-content | transform-box: content-box |\n| transform-box-border  | transform-box: border-box  |\n| transform-box-fill    | transform-box: fill-box    |\n| transform-box-stroke  | transform-box: stroke-box  |\n| transform-box-view    | transform-box: view-box    |\n\nInherits values from `theme.transformBox` in your config.\n\n#### transform-style\n\n| Class                | Properties                   |\n| -------------------- | ---------------------------- |\n| transform-style-flat | transform-style: flat        |\n| transform-style-3d   | transform-style: preserve-3d |\n\nInherits values from `theme.transformStyle` in your config.\n\n### Animations\n\n[Tailwind Play animation examples](https://play.tailwindcss.com/3eRYxPuBZX)\n\nAvailable animations:\n\n* bounce (x, y, z)\n* spin (x, y, z)\n* bounce-and-spin (x, y, z)\n\nAn example:\n\n```html\n\u003c!-- spin around the y-axis at a medium rate --\u003e\n\u003cdiv class=\"animate-spin-y-5\"\u003e\u003c/div\u003e\n```\n\nNote that you may see unexpected results on the y-axis as this plugin treats\n\"up\" as a negative value. You can use negative animations (prepending a `-` to\nthe start of a class) to change the direction of travel:\n\n```html\n\u003c!-- bounce upwards at a medium rate and height on the y-axis --\u003e\n\u003cdiv class=\"-animate-bounce-y-5\"\u003e\u003c/div\u003e\n```\n\n## Configuration\n\nDefault modifiers and values for utilities and animations can be changed in your\n`tailwind.config.js` file by extending the relevant theme defaults.\n\n## Development\n\nRequirements:\n\n* NodeJS 18+\n* PNPM 7+\n\n### Build the plugin\n\nAfter cloning the repository, to compile a build:\n\n```sh\npnpm build\npnpm build:types\n```\n\nThis will create a compiled version of the plugin in the `./dist` directory.\n\nTo have the build automatically compiled, run:\n\n```sh\npnpm dev\n```\n\nThis also compiles both code and types to `./dist`.\n\n### Testing and linting\n\n```sh\npnpm lint\npnpm test\n```\n","funding_links":[],"categories":["Plugins"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsambauers%2Ftailwindcss-3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsambauers%2Ftailwindcss-3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsambauers%2Ftailwindcss-3d/lists"}