[Feature Request] - rotate-y, rotate-x, rotate-z

[billy-le]

Hello TailwindCSS team,

I came across where I had to make a flip card and found that the current rotate class will only rotate on a 2d plane.

It would be a cool feature that extends the rotate utility to include rotate-x, rotate-y, and rotate-z to compliment rotate. The tailwind class could end up something like this:

--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-rotate-x: 0;
--tw-rotate-y: 0;
--tw-rotate-z: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z))
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

Thank you for hearing me out. I appreciate all the work you all do! Keep up the good work! ❤️

[billy-le]

I didn't realized there were other discussions about this and found another thread. Please feel free to close this discussion.

[flamedevilos]

adding classes like rotateX, rotateY &... you can try this librairy from https://xpd-kasun.github.io/tailwind-3dtransform-plugin/