@kamona/tailwindcss-perspective

A little bit of utility classes related to css 3d transform

Installation

⚠️ Note that @kamona/tailwindcss-perspective works only in jit mode and not compatible with tailwindcss v3 yet

Install the plugin from npm:

# Using npm
npm install -D @kamona/tailwindcss-perspective

# Using Yarn
yarn add -D @kamona/tailwindcss-perspective

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  theme: {
    // ...
  },
  plugins: [
    require('@kamona/tailwindcss-perspective'),
    // ...
  ],
}

Basic usage

View the live examples

Read this tutorial to get familiar with 3d transformation in css

Basic Examples

<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>

transform-style-3d class

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>

Perspective origin.

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

---

More information soon...