Rotate not actually 3D

[michaelmannucci]

How do I do an actual perspective rotate? When you 3d rotate something, one side should become smaller because it's further away. This plugin seems to basically just scale it on one axis, and it stays the same size on both sides throughout the whole rotation.

How it should work:

How it works:

[RickCardoso]

How do I do an actual perspective rotate? When you 3d rotate something, one side should become smaller because it's further away. This plugin seems to basically just scale it on one axis, and it stays the same size on both sides throughout the whole rotation.

How it should work:

How it works:

That's because this plugin only adds the missing 3D transformations to the tailwind classes. What you want can be achieved with a combination of CSS transformations.

[sambauers]

You need to specify a perspective-* class on a parent element, for example:

<div class="perspective-250">
  <img src="/some-image.jpg" class="h-40 w-80 -rotate-y-45"
</div>

More examples of rotate are here: https://play.tailwindcss.com/m1NO5HFfGx

See the CSS docs on perspective here: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective