Add 3D transforms to your TailwindCSS project.

TailwindCSS 3D is a TailwindCSS plugin that adds additional transform utilities and animations which can help you to add three dimensional styling.

By default TailwindCSS adds transforms in two dimensions ("x" and "y" axis only), so scale, rotate, and translate are flat transformations. This plugin adds support for the "z" axis and implements extensions to the bounce and spin animations to allow them to operate in multiple directions.

Tailwind's core implementation uses the transform CSS property to achieve all transformations. This method is better supported by older browsers, but has some limitations which make it more difficult to use.

This plugin implements transformation using newer CSS properties like rotate, translate, and scale where support in more recent browsers allows. This opens some new possibilities when combining utility classes with animations, and in the composition of new animations.

Install the plugin from npm:

npm install tailwindcss-3d

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

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-3d'),
    // ...
  ],
}

Inherits values from theme.scale in your config.

Scaling in one dimension:

<!-- scale on x-axis 50% -->
<div class="scale-x-50">

<!-- scale on y-axis 75% -->
<div class="scale-y-75">

<!-- scale on z-axis 110% -->
<div class="scale-y-110">

You can mix scaling values together as well:

<!-- scale on y-axis 75% and z-axis 95% -->
<div class="scale-y-75 scale-z-95"></div>

Arbitrary values:

<!-- scale on y-axis 30% -->
<div class="scale-y-[0.3]"></div>

Scale on both x and y-axis in proportion:

<!-- scale on x-axis and y-axis 50% -->
<div class="scale-50">

Scale all three dimensions in proportion:

<!-- scale on x-axis, y-axis and z-axis 150% -->
<div class="scale3d-150">

Inherits values from theme.rotate in your config.

Rotating around x-axis and y-axis:

<!-- rotate along x-axis 45 degrees -->
<div class="rotate-x-45"></div>

<!-- rotate along y-axis 12 degrees -->
<div class="rotate-y-12"></div>

Z-axis rotation is still the default, so the following are equivalent to each other:

<!-- rotate along z-axis 45 degrees -->
<div class="rotate-45"></div>

<!-- rotate along z-axis 45 degrees -->
<div class="rotate-z-45"></div>

Arbitrary values:

<!-- rotate along y-axis 30 degrees -->
<div class="rotate-y-[30deg]"></div>

You can mix rotation values together as well:

<!-- rotate along y-axis 12 degrees and z-axis 45 degrees -->
<div class="rotate-y-12 rotate-z-45"></div>

Inherits values from theme.translate in your config.

Note that translation on the z-axis can not use percentage values.

Inherits values from theme.skew in your config.

Inherits values from theme.perspective in your config.

Inherits values from theme.perspectiveOrigin in your config.

Inherits values from theme.backface in your config.

Inherits values from theme.transformBox in your config.

Inherits values from theme.transformStyle in your config.

Available animations:

• bounce (x, y, z)
• spin (x, y, z)
• bounce-and-spin (x, y, z)

An example:

<!-- spin around the y-axis at a medium rate -->
<div class="animate-spin-y-5"></div>

Note that you may see unexpected results on the y-axis as this plugin treats "up" as a negative value. You can use negative animations (prepending a - to the start of a class) to change the direction of travel:

<!-- bounce upwards at a medium rate and height on the y-axis -->
<div class="-animate-bounce-y-5"></div>

Default modifiers and values for utilities and animations can be changed in your tailwind.config.js file by extending the relevant theme defaults.

Requirements:

• NodeJS 18+
• PNPM 7+

After cloning the repository, to compile a build:

pnpm build
pnpm build:types

This will create a compiled version of the plugin in the ./dist directory.

To have the build automatically compiled, run:

pnpm dev

This also compiles both code and types to ./dist.

pnpm lint
pnpm test