CSS perspective 透视效果详解一、perspective 概述CSSperspective属性用于为3D变换元素创建透视效果。它定义了观察者与元素之间的距离影响3D变换的视觉深度。1.1 基本语法.container { perspective: 1000px; perspective: none; }二、工作原理2.1 透视深度/* 近距离透视 */ .perspective-close { perspective: 500px; } /* 远距离透视 */ .perspective-far { perspective: 2000px; }2.2 透视原点.container { perspective: 1000px; perspective-origin: center center; /* 默认值 */ perspective-origin: top left; perspective-origin: 50% 50%; }三、与 transform-style 配合3.1 preserve-3d.container { perspective: 1000px; } .child { transform-style: preserve-3d; transform: rotateY(45deg); }3.2 flat.child { transform-style: flat; /* 默认值不保留3D */ }四、实战案例4.1 3D 卡片效果.card-container { perspective: 1000px; } .card { width: 200px; height: 300px; transform-style: preserve-3d; transition: transform 0.5s ease; } .card:hover { transform: rotateY(15deg) rotateX(-10deg); } .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; } .card-front { background: linear-gradient(135deg, #667eea, #764ba2); } .card-back { background: #f7fafc; transform: rotateY(180deg); }4.2 3D 导航菜单.nav-container { perspective: 1200px; } .nav-item { transform-style: preserve-3d; transition: transform 0.3s ease; } .nav-item:hover { transform: translateZ(20px); }4.3 3D 轮播图.carousel { perspective: 1500px; } .carousel-item { transform-style: preserve-3d; transform: rotateY(var(--rotate-y)) translateZ(300px); }五、性能考虑5.1 硬件加速.element { perspective: 1000px; will-change: transform; }六、浏览器兼容性属性ChromeFirefoxSafariEdgeperspective12105.112七、总结perspective 是创建3D效果的基础透视距离- 值越小透视效果越强透视原点- 定义观察点位置transform-style- 配合使用 preserve-3dbackface-visibility- 控制背面可见性合理使用可以创建沉浸式的3D效果。