css3中景深是什么意思

CSS3中的景深指的是模拟3D空间中的近大远小的视觉效果。我们可以利用CSS3的transform属性，通过对元素的旋转、位移等变换来实现景深效果。

/* 假设我们有一个容器div，里面包含了几个元素 */
div {
  perspective: 500px; /* 设置透视距离 */
}
.item {
  transform: translateZ(100px); /* 设置元素Z轴方向的位移 */
}

/* 元素距离越近，位移值应该越小 */
.item1 {
  transform: translateZ(50px);
}
.item2 {
  transform: translateZ(150px);
}

在上面的例子中，我们通过给容器父元素设置perspective属性，来模拟观察者视角下的透视效果，值越小，透视效果越强。同时，我们给每个元素设置了Z轴方向的位移值，来模拟它们在3D空间中的位置。值越小，表示元素越靠近我们。

景深是一种非常有趣的视觉效果，我们可以通过它来优化页面的设计，提升用户体验。但是需要注意的是，过度使用景深效果会影响网页的性能，因为它需要很大的计算量来模拟3D效果。