CSS perspective 属性：应用于父元素和子元素的区别是什么？

perspective 属性在 CSS 中用于创建 3D 效果，它定义了观察者与 z=0 平面之间的距离，从而影响元素的 3D 变换效果。perspective 可以应用于父元素或子元素，但它们的表现方式有所不同。

1. 应用于父元素

当 perspective 属性应用于父元素时，它会为所有子元素创建一个共享的 3D 空间。这意味着所有子元素的 3D 变换都会基于同一个透视点进行计算。

示例：

.parent {
  perspective: 1000px;
}

.child {
  transform: rotateY(45deg);
}

效果： - 所有子元素（.child）都会共享同一个透视点。 - 子元素的 3D 变换效果会基于这个透视点进行计算。 - 父元素的 perspective 值越大，3D 效果越不明显（透视点越远）；值越小，3D 效果越明显（透视点越近）。

2. 应用于子元素

当 perspective 属性应用于子元素时，每个子元素都会有自己的独立 3D 空间。这意味着每个子元素的 3D 变换都会基于自己的透视点进行计算。

示例：

.child {
  perspective: 1000px;
  transform: rotateY(45deg);
}

效果： - 每个子元素（.child）都有自己的透视点。 - 子元素的 3D 变换效果会基于各自的透视点进行计算。 - 每个子元素的 perspective 值越大，3D 效果越不明显；值越小，3D 效果越明显。

3. 区别总结

• 共享透视点 vs 独立透视点：父元素的 perspective 会为所有子元素创建一个共享的透视点，而子元素的 perspective 会为每个子元素创建独立的透视点。
• 效果一致性：父元素的 perspective 会使所有子元素的 3D 效果保持一致，而子元素的 perspective 会使每个子元素的 3D 效果独立。
• 性能影响：父元素的 perspective 通常性能更好，因为只需要计算一个透视点；而子元素的 perspective 可能会增加计算量，因为每个子元素都需要计算自己的透视点。

4. 使用场景

• 父元素 perspective：适用于需要多个子元素共享同一个 3D 空间的场景，例如一个 3D 旋转的卡片堆。
• 子元素 perspective：适用于每个子元素需要独立 3D 效果的场景，例如每个卡片都有自己的 3D 旋转效果。

通过理解 perspective 属性在父元素和子元素上的区别，你可以更好地控制 3D 效果的表现方式。