Any progress of supporting `rotateX` or `rotateY`? #3521

wenjoy · 2021-02-04T03:47:45Z

wenjoy
Feb 4, 2021

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 · 2021-02-05T00:26:53Z

simonswiss
Feb 5, 2021

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 🎉

2 replies

wenjoy Feb 12, 2021
Author

It works, thanks

brandonpittman Mar 19, 2021

@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 · 2021-06-23T06:37:26Z

exreplay
Jun 23, 2021

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.

0 replies

denjaland · 2022-08-05T14:05:15Z

denjaland
Aug 5, 2022

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 :-)

2 replies

NafiurSiddiqui May 1, 2023

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 May 2, 2023

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 · 2022-09-15T05:24:03Z

kolin-newby
Sep 15, 2022

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.

2 replies

brandonpittman Sep 15, 2022

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

brandonmcconnell May 2, 2023

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

alex-page · 2022-10-22T06:53:40Z

alex-page
Oct 22, 2022

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.

1 reply

brandonmcconnell May 2, 2023

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

sambauers · 2023-02-05T11:41:12Z

sambauers
Feb 5, 2023

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.

0 replies

brandonmcconnell · 2023-02-08T06:38:13Z

brandonmcconnell
Feb 8, 2023

@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?

4 replies

sambauers Feb 8, 2023

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.

felquis · 2024-02-23T12:03:30Z

felquis
Feb 23, 2024

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

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

1 reply

brandonmcconnell Feb 23, 2024

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 💯

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Any progress of supporting `rotateX` or `rotateY`? #3521

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 8 comments 12 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Any progress of supporting rotateX or rotateY? #3521

Replies: 8 comments · 12 replies

wenjoy Feb 12, 2021 Author

Any progress of supporting `rotateX` or `rotateY`? #3521

Replies: 8 comments 12 replies

wenjoy Feb 12, 2021
Author