一般情况下,当在一个元素上应用透视时,它的子元素还是保持二维的平面状态。transform-style
属性给了我们一系列的选项值,这些值要么使这些元素保持在那个平面上,要么脱离那个平面。
在这个设计中,我们将为每一个元素应用preserve-3d
属性,并使用translateZ
将内容简介设置为3D模式。同时通过定义,让内容简介向用户靠近80px
。
.item {
transform-style : preserve-3d; }
.item__description {
transform : translateZ(80px); }