tp

@kamona/tailwindcss-perspective

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

Showing:

Popularity

Downloads/wk

10

GitHub Stars

13

Maintenance

Last Commit

2mos ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

@kamona/tailwindcss-perspective

GitHub license Downloads Version

Installation

Note that @kamona/tailwindcss-perspective works only in jit mode.

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.

ClassValue
perspective-nonenone
perspective-1100px
perspective-2200px
perspective-3300px
perspective-4400px
perspective-5500px
perspective-6600px
perspective-7700px
perspective-8800px
perspective-9900px
perspective-101000px
perspective-25vw25vw
perspective-50vw50vw
perspective-75vw75vw
perspective-100vw100vw

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.
ClassProperties
perspective-origin-centerperspective-origin: center
perspective-origin-topperspective-origin: top
perspective-origin-top-rightperspective-origin: top right
perspective-origin-rightperspective-origin: right
perspective-origin-bottom-rightperspective-origin: bottom right
perspective-origin-bottomperspective-origin: bottom
perspective-origin-bottom-leftperspective-origin: bottom left
perspective-origin-leftperspective-origin: left
perspective-origin-top-leftperspective-origin: top-left

More information soon...

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial