{"id":13402471,"url":"https://github.com/Kamona-WD/tailwindcss-perspective","last_synced_at":"2025-03-14T08:30:46.536Z","repository":{"id":40738193,"uuid":"390160913","full_name":"Kamona-WD/tailwindcss-perspective","owner":"Kamona-WD","description":"A little bit of utility classes related to css 3d transform","archived":false,"fork":false,"pushed_at":"2022-02-08T08:21:15.000Z","size":319,"stargazers_count":118,"open_issues_count":0,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-14T15:05:19.950Z","etag":null,"topics":["3d","css","tailwindcss","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"https://kamona-wd.github.io/tailwindcss-perspective/index.html","language":"JavaScript","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/Kamona-WD.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-28T00:05:07.000Z","updated_at":"2024-05-14T10:59:01.000Z","dependencies_parsed_at":"2022-08-10T00:41:14.783Z","dependency_job_id":null,"html_url":"https://github.com/Kamona-WD/tailwindcss-perspective","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamona-WD%2Ftailwindcss-perspective","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamona-WD%2Ftailwindcss-perspective/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamona-WD%2Ftailwindcss-perspective/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kamona-WD%2Ftailwindcss-perspective/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kamona-WD","download_url":"https://codeload.github.com/Kamona-WD/tailwindcss-perspective/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243547264,"owners_count":20308671,"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":["3d","css","tailwindcss","tailwindcss-plugin"],"created_at":"2024-07-30T19:01:16.457Z","updated_at":"2025-03-14T08:30:46.149Z","avatar_url":"https://github.com/Kamona-WD.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Plugins"],"sub_categories":[],"readme":"# @kamona/tailwindcss-perspective\n\n[![GitHub license](https://img.shields.io/github/license/Kamona-WD/tailwindcss-perspective)](https://github.com/Kamona-WD/tailwindcss-perspective/blob/main/LICENSE)\n[![Downloads](https://img.shields.io/npm/dm/@kamona/tailwindcss-perspective.svg?sanitize=true)](https://npmcharts.com/compare/@kamona/tailwindcss-perspective?minimal=true)\n[![Version](https://img.shields.io/npm/v/@kamona/tailwindcss-perspective.svg?sanitize=true)](https://www.npmjs.com/package/@kamona/tailwindcss-perspective)\n\n### A little bit of utility classes related to css 3d transform\n\n## Installation\n\n\u003e ⚠️ Note that @kamona/tailwindcss-perspective works only in `jit` mode and not compatible with `tailwindcss v3` yet\n\nInstall the plugin from npm:\n\n```sh\n# Using npm\nnpm install -D @kamona/tailwindcss-perspective\n\n# Using Yarn\nyarn add -D @kamona/tailwindcss-perspective\n```\n\nThen add the plugin to your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  mode: 'jit',\n  theme: {\n    // ...\n  },\n  plugins: [\n    require('@kamona/tailwindcss-perspective'),\n    // ...\n  ],\n}\n```\n\n## Basic usage\n\n[**View the live examples**](https://kamona-wd.github.io/tailwindcss-perspective/)\n\n[**Read this tutorial to get familiar with 3d transformation in css**](https://3dtransforms.desandro.com/)\n\n##### Basic Examples\n\n```html\n\u003cdiv class=\"perspective-9\"\u003e\n  \u003cdiv class=\"w-40 h-40 p-4 bg-red-500 rotate-x-30 rotate-y-35 -rotate-z-20\"\u003e\n    \u003ch2\u003e3D transform\u003c/h2\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nFirst you need to add `perspective-*` class to parent element to activate 3d space to its children.\n\n| Class               | Value  |\n| ------------------- | ------ |\n| `perspective-none`  | none   |\n| `perspective-1`     | 100px  |\n| `perspective-2`     | 200px  |\n| `perspective-3`     | 300px  |\n| `perspective-4`     | 400px  |\n| `perspective-5`     | 500px  |\n| `perspective-6`     | 600px  |\n| `perspective-7`     | 700px  |\n| `perspective-8`     | 800px  |\n| `perspective-9`     | 900px  |\n| `perspective-10`    | 1000px |\n| `perspective-25vw`  | 25vw   |\n| `perspective-50vw`  | 50vw   |\n| `perspective-75vw`  | 75vw   |\n| `perspective-100vw` | 100vw  |\n\nAll default `rotate` values also available to `rotate-x`, `rotate-y`, and `rotate-z` with more values.\n\n```js\n//\n{\n  rotate3d: (theme) =\u003e ({\n    // default values\n    // https://tailwindcss.com/docs/rotate\n      ...theme('rotate'),\n      // new values\n      ...{\n          '-60': '-60deg',\n          '-50': '-50deg',\n          '-40': '-40deg',\n          '-35': '-35deg',\n          '-30': '-30deg',\n          '-25': '-25deg',\n          '-20': '-20deg',\n          '-15': '-15deg',\n          '-10': '-10deg',\n          10: '10deg',\n          15: '15deg',\n          20: '20deg',\n          25: '25deg',\n          30: '30deg',\n          35: '35deg',\n          40: '40deg',\n          50: '50deg',\n          60: '60deg',\n      }\n  }),\n}\n//\n```\n\nAll default `translate-x` and `translate-y` values also available to `translate-z`.\n\n```html\n\u003cdiv class=\"perspective-9\"\u003e\n  \u003cdiv class=\"w-40 h-40 p-4 bg-red-500 translate-z-20 rotate-x-30 rotate-y-35 -rotate-z-20\"\u003e\n    \u003ch2\u003e3D transform\u003c/h2\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n###### `transform-style-3d` class\nAn element’s perspective only applies to direct descendant children. In order for subsequent children to inherit a parent’s perspective, and live in the same 3D space, the parent can pass along its perspective with `transform-style: preserve-3d`.\n\n```html\n\u003cdiv class=\"p-20\"\u003e\n  \u003cdiv class=\"perspective-9\"\u003e\n    \u003c!-- we need to add 'transform-style-3d' class to make its child live in the same 3d space --\u003e\n    \u003cdiv class=\"w-40 h-40 p-4 bg-green-500 transform-style-3d rotate-x-30 rotate-y-35 -rotate-z-20\"\u003e\n      \u003cdiv class=\"flex justify-end\"\u003e\n        \u003cp\n          class=\"p-2 translate-x-10 -translate-y-6 border border-black shadow-xl bg-white/70 translate-z-16 -rotate-x-10 -rotate-y-30 rotate-z-20\"\n        \u003e\n          3D transform\n        \u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\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\n---\n\n##### More information soon...\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKamona-WD%2Ftailwindcss-perspective","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKamona-WD%2Ftailwindcss-perspective","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKamona-WD%2Ftailwindcss-perspective/lists"}