⚠️ Note that @kamona/tailwindcss-perspective works only injitmode and not compatible withtailwindcss v3yet
Install the plugin from npm:
# Using npm
npm install -D @kamona/tailwindcss-perspective
# Using Yarn
yarn add -D @kamona/tailwindcss-perspectiveThen add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
mode: 'jit',
theme: {
// ...
},
plugins: [
require('@kamona/tailwindcss-perspective'),
// ...
],
}Read this tutorial to get familiar with 3d transformation in css
<div class="perspective-9">
<div class="w-40 h-40 p-4 bg-red-500 rotate-x-30 rotate-y-35 -rotate-z-20">
<h2>3D transform</h2>
</div>
</div>First you need to add perspective-* class to parent element to activate 3d space to its children.
| Class | Value |
|---|---|
perspective-none |
none |
perspective-1 |
100px |
perspective-2 |
200px |
perspective-3 |
300px |
perspective-4 |
400px |
perspective-5 |
500px |
perspective-6 |
600px |
perspective-7 |
700px |
perspective-8 |
800px |
perspective-9 |
900px |
perspective-10 |
1000px |
perspective-25vw |
25vw |
perspective-50vw |
50vw |
perspective-75vw |
75vw |
perspective-100vw |
100vw |
All default rotate values also available to rotate-x, rotate-y, and rotate-z with more values.
//
{
rotate3d: (theme) => ({
// default values
// https://tailwindcss.com/docs/rotate
...theme('rotate'),
// new values
...{
'-60': '-60deg',
'-50': '-50deg',
'-40': '-40deg',
'-35': '-35deg',
'-30': '-30deg',
'-25': '-25deg',
'-20': '-20deg',
'-15': '-15deg',
'-10': '-10deg',
10: '10deg',
15: '15deg',
20: '20deg',
25: '25deg',
30: '30deg',
35: '35deg',
40: '40deg',
50: '50deg',
60: '60deg',
}
}),
}
//All default translate-x and translate-y values also available to translate-z.
<div class="perspective-9">
<div class="w-40 h-40 p-4 bg-red-500 translate-z-20 rotate-x-30 rotate-y-35 -rotate-z-20">
<h2>3D transform</h2>
</div>
</div>An 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.
<div class="p-20">
<div class="perspective-9">
<!-- we need to add 'transform-style-3d' class to make its child live in the same 3d space -->
<div class="w-40 h-40 p-4 bg-green-500 transform-style-3d rotate-x-30 rotate-y-35 -rotate-z-20">
<div class="flex justify-end">
<p
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"
>
3D transform
</p>
</div>
</div>
</div>
</div>| Class | Properties |
|---|---|
perspective-origin-center |
perspective-origin: center |
perspective-origin-top |
perspective-origin: top |
perspective-origin-top-right |
perspective-origin: top right |
perspective-origin-right |
perspective-origin: right |
perspective-origin-bottom-right |
perspective-origin: bottom right |
perspective-origin-bottom |
perspective-origin: bottom |
perspective-origin-bottom-left |
perspective-origin: bottom left |
perspective-origin-left |
perspective-origin: left |
perspective-origin-top-left |
perspective-origin: top-left |