CSS3 3D 变换实现立体翻转效果
CSS3 中的 perspective、transform-style: preserve-3d、backface-visibility 分别起什么作用？如何实现一个 3D 翻转卡片？translate3d/rotateX/rotateY 与普通 transform 有何区别？
回答
编译有声
perspective 定义视点到 z=0 距离，控制 3D 透视强度。transform-style:preserve-3d 使子元素在 3D 空间中定位。backface-visibility:hidden 隐藏背面。3D 翻转: .card 容器设 perspective:800px; .card-inner 设 preserve-3d; .front/.back 设 backface-visibility:hidden; .back 初始 rotateY(180deg); hover 时 .card-inner rotateY(180deg)。translate3d 启用 GPU 加速(合成层)；rotateX/Y/Z 在 3D 空间旋转。移动端 perspective 过小产生强烈畸变。