Tailwind配置中设置transformOrigin:center实现按钮旋转动画失效问题

你的问题出在transformOrigin的设置方式和位置上，以下是两种可行的解决办法：

方法一：使用Tailwind内置工具类（推荐） #

Tailwind自带origin-center工具类，直接给元素加上这个类就能设置旋转原点，不需要在keyframes里额外配置，更符合Tailwind的使用习惯。

修改后的tailwind.config配置 #

module.exports = {
  theme: {
    extend: {
      keyframes: {
        rotate: {
          "0%": {
            transform: "rotate(0) translateY(0)",
          },
          "100%": {
            transform: "rotate(180deg) translateY(-40px)",
          },
        },
      },
      animation: {
        rotate: "rotate 1s forwards",
      },
    },
  },
};

按钮HTML代码 #

<button class="origin-center animate-rotate">旋转按钮</button>

方法二：在keyframes根节点设置transformOrigin #

如果一定要在动画配置里定义transformOrigin，可以把它放在keyframes的根节点下（而非每个关键帧内部），这样整个动画周期都会生效：

module.exports = {
  theme: {
    extend: {
      keyframes: {
        rotate: {
          transformOrigin: 'center',
          "0%": {
            transform: "rotate(0) translateY(0)",
          },
          "100%": {
            transform: "rotate(180deg) translateY(-40px)",
          },
        },
      },
      animation: {
        rotate: "rotate 1s forwards",
      },
    },
  },
};

注意事项 #

• 确保自定义动画配置包裹在theme.extend下，否则会覆盖Tailwind默认主题，导致动画不生效。
• 不要在每个关键帧重复定义transformOrigin，这属于冗余设置，且可能导致浏览器解析异常。

内容的提问来源于stack exchange，提问作者Firestarter