perspective必须作用于父容器并配合transform-style: preserve-3d才能生效，值越小透视感越强；它定义观察者到z=0平面的距离，仅对含z轴变换的子元素起作用，不可用于子元素自身或无3d变换的场景。

perspective 不是“加了就有3D效果”，而是决定“你离这个3D场景有多近”——值越小，近大远小越夸张；值为 none 或 0，就根本没透视，所有Z轴移动都像贴在平面上滑动。

perspective 必须作用在父容器上才有效

它不直接改变自身，只给子元素提供一个共享的3D观察空间。如果你把 perspective: 500px 写在要旋转的卡片元素自己身上，那它只是“假装有视点”，但子元素（比如卡片正面/背面）并不会共用这个视角，结果就是翻转生硬、无纵深感。

常见错误现象：

• 卡片翻转时像纸片对折，没有“绕轴旋转入景深”的感觉
• 多个3D元素各自独立变形，彼此不协调

正确做法：

• 把 perspective 加在包裹卡片的容器（如 .card-container）上
• 确保该容器有明确的 transform-style: preserve-3d，否则子元素会被拍平
• 避免在子元素上再写 perspective，否则会覆盖或干扰父级定义

数值选多少？不是越大越好，也不是越小越炫

典型值范围是 300px 到 1200px，取决于你希望观众“站得多近”。300px 像凑近手机看，轻微Z位移就会明显缩放；1200px 像退到两米外看展柜，动作更沉稳自然。

容易踩的坑：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• perspective: 50px：太近，稍一 translateZ(20px) 就撑满视口，甚至因超出视距而消失（translateZ > perspective 时元素不可见）
• perspective: 5000px：几乎等于无透视，Z轴变化只剩位置偏移，没了“空间感”
• 用 % 或 em 单位：无效，perspective 只接受 px、rem 等绝对长度单位

为什么加了 perspective 还没效果？检查这三点

最常被忽略的是“它只对真正用了Z轴的变换起作用”。光写 perspective 不够，子元素还得有 transform 涉及Z维：

• 只用 rotateY(45deg)？没问题，Y轴旋转天然依赖透视
• 只用 translateX(100px)？不行，这是纯2D平移，perspective 完全不生效
• 用了 translateZ(50px) 但父容器没设 transform-style: preserve-3d？子元素Z位移会被强制扁平化，等同于没动

另外注意兼容性：Safari 和 Chrome 旧版需加 -webkit-perspective；Firefox 自 16+、Edge 自 12+ 已原生支持，无需前缀。

perspective 和 transform: perspective() 的区别

两者都能触发透视，但作用机制不同：

• perspective: 500px（属性）：定义整个子树的统一观察点，适合多个3D元素协同动画
• transform: perspective(500px) rotateY(45deg)（函数）：仅影响当前元素，且 perspective() 必须写在其他变换之前，否则被忽略

关键差异：

• 属性方式可被继承（虽然实际不继承，但子元素自动获得该空间）；函数方式是单次计算，不共享
• 用函数时若叠加多个 transform 值（如 perspective(500) rotateY(45) scale(1.2)），顺序错一个，透视就失效
• JS 动态控制时，改 style.perspective 比拼接 transform 字符串更稳定

真正难的不是设值，而是理解：perspective 定义的是“眼睛在哪”，而不是“物体怎么动”。眼睛位置定错了，再准的 rotate3d() 也出不来真实空间感。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！