Perspective Origin

Utilities for setting perspective origin css property.

Class	Properties
transform-box-content	transform-box: content-box;
transform-box-border	transform-box: border-box;
transform-box-fill	transform-box: fill-box;
transform-box-stroke	transform-box: stroke-box;
transform-box-view	transform-box: view-box;

Basic Usage

Use perspective-origin classes set the perspective origin property which is used to determine the position at which the viewer is looking. See more on perspective origin from MDN reference. This is used along with perspective class.

For instance you can use,

<div class="perspective-800 perspective-origin-top-left">
       <!--Some elementes-->
</div>

Customizing Your Theme

This takes the same values as transformOrigin. We can add new perspective-origin classes by extend the default theme by giving additional values for transformOrigin key.

module.exports = {
  theme: {
    extend: {
      transformOrigin: {
        '1/2': '50%',
      }
    }
  }
}

Arbitrary Values

Use usual bracket syntax to add arbitrary values for perspective origin. If you have two values, then join them with _ char. For example,

       <div class="perspective-origin-[40%_50%]">
              <!-- html content -->
       </div>

Learn more about arbitrary value support in the tailwindcss arbitrary values documentation.