HTML怎么设置transform-style_HTML transform-style preserve-3d【附代码】-html教程-PHP中文网

transform-style: preserve-3d 失效主因是父容器未设非none transform（如translatez(0)）或被overflow:hidden/filter等中断3d上下文，必须逐层确保preserve-3d+有效transform共存且无降级属性。

html怎么设置transform-style_html transform-style preserve-3d【附代码】

transform-style: preserve-3d 为什么加了没效果？

绝大多数时候，transform-style: preserve-3d 失效不是写错了，而是父元素“拦腰截断”了 3D 渲染上下文。浏览器只在满足特定条件时才真正启用子元素的 3D 空间——父容器必须同时满足：transform-style: preserve-3d + 有非 none 的 transform（哪怕只是 translateZ(0)）。

常见错误现象：div 套 div，内层设了 rotateY(45deg)，外层只写了 transform-style: preserve-3d 却没加任何 transform，结果内层仍被压平成 2D。

必须给父容器加一个“触发 transform”的声明，例如 transform: translateZ(0) 或 transform: rotateX(0)
父容器不能有 overflow: hidden、filter、opacity 等会创建新层叠上下文且破坏 3D 渲染的属性
Chrome/Firefox 支持良好，但 Safari 对嵌套过深或含 will-change 的组合有时会退化为 flat

preserve-3d 和 flat 的实际渲染差异

transform-style: flat（默认值）会让所有子元素先各自扁平化到父容器的平面，再整体做变换；而 preserve-3d 允许子元素在父容器定义的 3D 坐标系中保持各自 Z 轴位置，彼此之间能真实遮挡、透视相交。

举个典型场景：做一个翻转卡片，正面和背面都用 position: absolute 叠在一起。如果父容器是 flat，翻转时两面会“粘连”或错位；设为 preserve-3d 后，配合 transform: rotateY(180deg) 才能实现自然翻转。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

检查是否真有 Z 轴深度：子元素需显式设置 transform: translateZ(50px) 或 rotateX(30deg) 等带 Z 分量的操作
透视必须由祖先级（通常是父容器的父级）通过 perspective 属性提供，transform-style 本身不提供透视
用 Chrome DevTools 的 3D 视图（Rendering 面板 → “Show 3D view”）可直观验证是否进入 3D 渲染流程

代码示例：最小可运行的 preserve-3d 结构

下面这段 HTML/CSS 是能稳定触发 3D 渲染的最简结构，复制即用：

<div class="scene">
  <div class="card">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
  </div>
</div>
<p><style>
.scene {
perspective: 1000px; /<em> 必须加在祖先上 /
}
.card {
width: 200px;
height: 200px;
transform-style: preserve-3d; /<em> 关键：开启子元素 3D 上下文 /
transform: rotateY(0deg); /<em> 必须有 transform，哪怕初始为 0 /
transition: transform 0.6s;
}
.card:hover {
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /<em> 防止背面透出 /
}
.front {
background: #4CAF50;
}
.back {
background: #2196F3;
transform: rotateY(180deg); /<em> 绕 Y 轴翻转 180°，让背面朝前 /
}
</style></p>