一般情况下,当在一个元素上应用透视时,它的子元素还是保持二维的平面状态。transform-style属性给了我们一系列的选项值,这些值要么使这些元素保持在那个平面上,要么脱离那个平面。

在这个设计中,我们将为每一个元素应用preserve-3d属性,并使用translateZ将内容简介设置为3D模式。同时通过定义,让内容简介向用户靠近80px

.item { 
transform-style : preserve-3d; } 

.item__description { 
transform : translateZ(80px); }