为什么设置transform-origin:center后元素不绕自身中心旋转，该如何解决？

问题原因 #

你遇到的异常旋转效果和transform-origin无关，核心问题是focus状态下的transform属性覆盖了默认状态的位移逻辑：
默认.button类设置了transform: translate(-50%, -50%)实现水平垂直居中，但是.button:focus的样式里只写了transform: rotate(90deg)，直接把位移属性覆盖丢失了，按钮的整体位置发生偏移，视觉上就会出现「没有绕自身中心旋转」的错误效果。

确认变换原点的方法 #

• 打开浏览器开发者工具（F12），选中目标按钮元素，切换到「计算样式」面板，搜索transform-origin即可查看当前实际生效的原点坐标
• 可临时给按钮添加一个绝对定位的子元素/伪元素，设置left: 50%; top: 50%; width: 4px; height: 4px; background: #000; transform: translate(-50%,-50%);，旋转时如果这个小黑点位置固定不动，就说明变换原点确实是按钮中心

修复代码 #

只需要修改.button:focus的transform属性，保留原有的位移效果再叠加旋转即可，注意transform多个属性的先后顺序不能调换：

.button:focus{
  border-style: none;
  background-color: #f19066;
  margin-top: -8.5vw;
  transform: translate(-50%, -50%) rotate(90deg);
}

原代码里的transform-origin:center可以直接删除，因为该属性的默认值就是center，无需额外声明。

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