Any progress of supporting rotateX or rotateY?

[wenjoy]

My project requires an effect using rotateX, I searched and found this PR Add composable transform utilities awesome but without supporting of rotateX.

Is there any plan or someting for this?

If none, I think I can make contribute to this if others also have requirements.

Pls give me ❤️ if you also want taliwind support rotateX.

[simonswiss]

Hey!

rotateX is fairly niche and not used that often in projects. For this reason, I think rotate-x utilities would be better suited for a plugin that you add to your project, instead of baking it in core Tailwind CSS.

Here's an example of how you could do that custom plugin:

https://play.tailwindcss.com/ZLp0DzFOSW?file=config

Hope it helps 🎉

[wenjoy]

It works, thanks

[brandonpittman]

@simonswiss

If you do what you suggest above, it breaks the custom property API for Tailwind's transforms.

You can totally redefine the transform utility, and your new rotate utilities can work with custom properties, but then the existing utils won't work (because your newly-defined transform will cancel out the existing custom props).

Here's the code I was using.

    const transforms = {
      ".transform-gpu": {
        transform:
          "translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",
        "--tw-rotate-x": "0.5turn",
        "--tw-translate-x": "0",
        "--tw-translate-y": "0",
        "--tw-rotate-x": "0",
        "--tw-rotate-y": "0",
        "--tw-rotate": "0",
        "--tw-skew-x": "0",
        "--tw-skew-y": "0",
        "--tw-scale-x": "1",
        "--tw-scale-y": "1",
      },
      ".flip-x": { "--tw-rotate-x": "180deg" },
      ".flip-y": { "--tw-rotate-y": "180deg" },
    };

At the very least, if the default Tailwind transform utils were defined as separate X, Y, and Z definitions, userland could define a plugin to fill in the gaps (if Adam doesn't want to support this). But if the default transform util only uses a plain rotate() function, userland plugins (in order to maintain the ability to use existing transform utils like translate et cetera) would have to redefine every transform util.

If Tailwind set rotateX and rotateY to new custom props, and used the existing --tw-rotate on rotateZ, you could keep the existing API.

[exreplay]

Another way would be to disable the core transform plugin and add your own plugin.

So what i did in my project was, first add transform: false to the corePlugins config object.

module.exports = {
  corePlugins: {
    transform: false
  }
}

Then i had a look at the core plugin, which can be found at https://github.com/tailwindlabs/tailwindcss/blob/master/src/plugins/transform.js

Because i am using the jit mode, i only copied the if clause and modified it to my needs

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addBase, addUtilities, variants }) {
      addBase({
        '*, ::before, ::after': {
          '--tw-translate-x': '0',
          '--tw-translate-y': '0',
          '--tw-rotate': '0',
          '--tw-rotate-y': '0',
          '--tw-skew-x': '0',
          '--tw-skew-y': '0',
          '--tw-scale-x': '1',
          '--tw-scale-y': '1',
          '--tw-transform': [
            'translateX(var(--tw-translate-x))',
            'translateY(var(--tw-translate-y))',
            'rotate(var(--tw-rotate))',
            'rotateY(var(--tw-rotate))',
            'skewX(var(--tw-skew-x))',
            'skewY(var(--tw-skew-y))',
            'scaleX(var(--tw-scale-x))',
            'scaleY(var(--tw-scale-y))'
          ].join(' ')
        }
      });
      addUtilities(
        {
          '.transform': {
            transform: 'var(--tw-transform)'
          },
          '.transform-cpu': {
            '--tw-transform': [
              'translateX(var(--tw-translate-x))',
              'translateY(var(--tw-translate-y))',
              'rotate(var(--tw-rotate))',
              'rotateY(var(--tw-rotate-y))',
              'skewX(var(--tw-skew-x))',
              'skewY(var(--tw-skew-y))',
              'scaleX(var(--tw-scale-x))',
              'scaleY(var(--tw-scale-y))'
            ].join(' ')
          },
          '.transform-gpu': {
            '--tw-transform': [
              'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
              'rotate(var(--tw-rotate))',
              'rotateY(var(--tw-rotate-y))',
              'skewX(var(--tw-skew-x))',
              'skewY(var(--tw-skew-y))',
              'scaleX(var(--tw-scale-x))',
              'scaleY(var(--tw-scale-y))'
            ].join(' ')
          },
          '.transform-none': { transform: 'none' }
        },
        variants('transform')
      );
    })
  ]
}

In my case, i added the rotateY property. And to top it all off, i added another plugin which lets you configure the new rotateY property. As default, it uses tailwinds rotate values from the default config.

const plugin = require('tailwindcss/plugin');
const defaultConfig = require('tailwindcss/defaultConfig');
const {
  default: prefixNegativeModifiers
} = require('tailwindcss/lib/util/prefixNegativeModifiers');
const map = require('lodash/map');

module.exports = {
  plugins: [
    plugin(
      function({ addUtilities, theme, e }) {
        const rotateY = map(theme('rotateY'), (value, key) => {
          return {
            [`.${e(prefixNegativeModifiers('rotate-y', key))}`]: {
              '--tw-rotate-y': value
            }
          };
        });

        addUtilities(rotateY);
      },
      {
        theme: {
          rotateY: defaultConfig.theme.rotate
        }
      }
    )
  ]
}

I hope that helps.

[denjaland]

For what it's worth - I'd love to see native support baked into tailwind as well to be honest.
Not sure why it's considered to be niche more than other transformations that are built into the framework? :-)

Using just one svg file to implement a diagonal shape divider, using rotate-x would allow me to use the one svg in both directions. Combining it with rotate alltogether allows me to reuse the one component both on top as well as bottom of the div I want to add the divider to :-)

[NafiurSiddiqui]

Exactly this is where I am suffering rn. I want to flip a svg file as well. Would be great if Tailwind supports this out of the box.

[brandonmcconnell]

Please see the related PR (#10982) and give it your support if you want this 🙂

In the meantime, check out this great community-created alternative: https://github.com/sambauers/tailwindcss-3d

[kolin-newby]

I have to add my support for this being natively supported in Tailwind. I was confused to find that "rotate-x", "rotate-y", and "rotate-z" classes were not already a thing.

[brandonpittman]

A year and a half in—I've given up on this…until it's included and made a big deal of.

[brandonmcconnell]

Please see the related PR (#10982) and give it your support if you want this 🙂

[alex-page]

perspective + rotateX is becoming more common with UI's. Linear is using it to tilt rectangles backwards in 3d space then animate them forwards towards the user in their new home page redesign.

I think this would be a great addition to tailwind.

[brandonmcconnell]

Please see the related PR (#10982) and give it your support if you want this 🙂

[sambauers]

I made this recently. It’s early days, but I think it has potential to fill this gap and others around 3D transforms.

https://github.com/sambauers/tailwindcss-3d

A bit lacking in documentation, but should make sense to most folks familiar with Tailwind transforms.

[brandonmcconnell]

@sambauers Dude, you just saved me. I was honestly pretty shocked Tailwind hasn't added support for these natively. 3D transforms are super pivotal in CSS animations and transitions.

Could you add some usage examples to your repo's README?

[sambauers]

I'll do that, but until I do it's pretty simple. You can use all the existing transforms like rotate-45 and they should work the same. In addition you can inject the axis you want to use, like rotate-x-45. Keep in mind there are some quirks to the modern CSS transforms, so you may need to add a parent element that has a perspective-* class to actually see any perspective.

[brandonmcconnell]

@sambauers Thanks! Yes, it is pretty straightforward. I managed to figure it out. 🙂

Does it also accept arbitrary values, e.g. rotate-x-[1turn]?

[sambauers]

Yes it does accept arbitrary values. I've added some usage documentation now - https://github.com/sambauers/tailwindcss-3d

[sambauers]

You can also configure your own custom values in your Tailwind config.

[felquis]

Today I tried transform-[rotateY(90deg)] doesn't exist,

Turns out [transform:rotateY(90deg)] works fine, 👍 nice

[brandonmcconnell]

Glad to hear it! If you want more flexibility around your transformations, definitely check out this plugin by @sambauers:
https://github.com/sambauers/tailwindcss-3d

It's spectacular 💯

[u2ru]

Fantastic !
Needed only 1 transform and did not wanted to mess with configs

[Nikoplezi]

Thanks so much!

[samvk]

Tailwind v4 is finally adding support for rotate-x-*, rotate-y-*, and rotate-z-* utilities.

https://tailwindcss.com/docs/v4-beta#rotate