CSS perspective作用于body标签无效，嵌套div可正常生效的问题

这是CSS 3D变换里一个容易踩的小坑，我来帮你理清楚原因和解决办法：

核心原因：body元素的特殊渲染上下文 #

浏览器对<body>元素的处理和普通div不一样——它是<html>的直接子元素，而<html>作为根元素有一些默认的渲染规则，会干扰3D变换的上下文建立：

• 当你给body设置perspective时，它的父元素<html>默认没有设置transform-style: preserve-3d，也没有适配的高度和overflow属性，导致body的3D空间无法正确传递给子元素。
• body的overflow属性和html的默认overflow会产生联动，破坏3D变换所需的独立渲染空间。

而普通div作为内部容器，没有这些特殊的默认规则限制，设置perspective后，它的子元素能直接继承并使用这个3D空间，所以变换能正常生效。

解决方案：配合html元素设置样式 #

如果一定要把perspective直接加在body上，只需要给html元素补充必要的样式，就能让body的3D变换生效：

html {
  height: 100%;
  overflow: hidden;
}
body {
  perspective: 1px;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  position: relative;
  transform-style: preserve-3d;
}

代码解释： #

• html { height: 100%; overflow: hidden; }：让html元素占满视口高度，同时隐藏默认滚动，避免和body的滚动属性冲突，确保body的3D空间能完整覆盖视口。
• 保留body原有的3D相关属性，此时body的perspective就能正确传递给子元素，实现预期的3D变换效果。

场景对比 #

• 用内部div的场景：div作为独立容器，天然具备正常的渲染上下文，所以perspective直接生效。
• 修正后的body场景：通过适配html的样式，消除了根元素的默认干扰，body的3D变换上下文能正常工作。

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