https://github.com/Kamona-WD/tailwindcss-perspective

A little bit of utility classes related to css 3d transform
https://github.com/Kamona-WD/tailwindcss-perspective

3d css tailwindcss tailwindcss-plugin

Last synced: 17 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/Kamona-WD/tailwindcss-perspective
• Owner: Kamona-WD
• License: mit
• Created: 2021-07-28T00:05:07.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-08T08:21:15.000Z (almost 3 years ago)
• Last Synced: 2024-05-14T15:05:19.950Z (6 months ago)
• Topics: 3d, css, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage: https://kamona-wd.github.io/tailwindcss-perspective/index.html
• Size: 312 KB
• Stars: 118
• Watchers: 1
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @kamona/tailwindcss-perspective

[![GitHub license](https://img.shields.io/github/license/Kamona-WD/tailwindcss-perspective)](https://github.com/Kamona-WD/tailwindcss-perspective/blob/main/LICENSE)

[![Downloads](https://img.shields.io/npm/dm/@kamona/tailwindcss-perspective.svg?sanitize=true)](https://npmcharts.com/compare/@kamona/tailwindcss-perspective?minimal=true)

[![Version](https://img.shields.io/npm/v/@kamona/tailwindcss-perspective.svg?sanitize=true)](https://www.npmjs.com/package/@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:

```sh

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

```js

// tailwind.config.js

module.exports = {

  mode: 'jit',

  theme: {

    // ...

  },

  plugins: [

    require('@kamona/tailwindcss-perspective'),

    // ...

  ],

}

```

## Basic usage

[**View the live examples**](https://kamona-wd.github.io/tailwindcss-perspective/)

[**Read this tutorial to get familiar with 3d transformation in css**](https://3dtransforms.desandro.com/)

##### Basic Examples

```html



  


    
3D transform

  



```


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.

```js

//

{

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

```html



  


    
3D transform

  



```


###### `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`.

```html



  


    

    


      


        


          3D transform

        

      

    

  



```


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