浅谈css perspective属性和perspective()函数的异同点(2)-木庄网络博客

下面设置一个元素的透视图，该元素的子元素在由透视属性触发的三维空间中转换：

.container {
    perspective: 1800px;
}
 
.container .child {
    float: left;
    margin: 50px;
    transform: translateZ(-50px) rotateY(45deg);
}

在线 Demo

可以在 3D 形状（例如立方体）上最好地展示元素的透视效果。

在这个演示中，存在三个相同的立方体，都具有相同的变换。他们每个都有不同的视角集。尝试更改透视的值以查看场景深度如何变化。

透视值越高，效果越弱，透视值越低，效果越强。

因为掘金不支持引进 iframe 预览，预览效果见 codepen css perspective demo

perspective vs perspective()

当你有一个元素想要在 3D 空间中转换时，你可以使用它的父元素的透视属性 perspective 激活该空间，或者使用转换元素本身的透视函数 perspective()。那么这两种方式有什么区别呢？

透视属性 perspective 和透视函数 perspective() 都用于通过使 z 轴上较高（靠近观察者）的元素显得更大，使远离的元素显得更小来赋予元素深度。值越小，z-pane离观察者越近，效果越令人印象深刻；值越高，元素离屏幕越远，效果越微妙。

当您使用透视函数 perspective() 将透视应用于元素时（有关其工作原理的详细信息，请参阅变换属性条目 transform），您仅在该元素上激活了三维空间。在对单个元素应用三维变换时，perspective() 表示法很方便。但是当你在一个容器中有多个转换的元素时，如果每个元素都使用透视函数 perspective() 设置了一个透视图，元素不会按预期排列。这是因为它们每个都有自己的三维空间，因此也有自己的消失点。为了避免这种情况并允许元素对齐，它们应该共享相同的空间。通过使用父容器上的透视属性 perspective，创建一个由其所有子元素共享的三维空间，这些子元素都将使用 3 维变换进行变换。

下图显示了在容器上触发一个三维空间的结果，容器的孩子在该空间中旋转（左），以及使用透视函数 perspective() 在每个项目上触发一个三维空间的结果（右）：