如何实现元素平面与倾斜状态切换时transform样式的平滑过渡？

你遇到的过渡时先放大再恢复的问题，根源在于切换perspective属性导致浏览器的3D空间计算异常。perspective是定义3D视距的属性，直接过渡它会让元素的空间感知发生突变，进而产生奇怪的缩放效果。

修正方案： #

1. 固定元素的perspective值，只过渡rotateX属性，让过渡仅作用于旋转角度，避免视距变化干扰。
2. 简化类切换逻辑，移除冗余的trigger变量，直接用classList.toggle实现类切换。
3. 清理重复的CSS定义，合并通用样式。

修正后的代码： #

HTML

<div id="heyBox" class='flat'>hey</div>
<button type="button" onclick="toggleSkew()">Click Me!</button>

CSS

#heyBox {
  background-color: black;
  color: white;
  width: 100px;
  height: 100px;
  margin: 30px;
  /* 固定perspective，只过渡rotateX */
  transform: perspective(100px) rotateX(0deg);
  transition: transform 500ms ease;
}

#heyBox.skewed {
  /* 仅修改rotateX，perspective保持不变 */
  transform: perspective(100px) rotateX(40deg);
}

JavaScript

function toggleSkew() {
  document.getElementById("heyBox").classList.toggle('skewed');
}

原理说明： #

• 把perspective固定在元素的基础样式中，切换类时只修改rotateX角度，这样过渡只会作用于旋转动作，不会触发视距变化带来的缩放异常。
• 用classList.toggle替代复杂的条件判断，代码更简洁且不易出错。
• 统一transition属性写法，明确指定过渡的属性为transform，避免不必要的属性过渡。

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