transform -s tyle属性是3D空间一个 重要 属性，指定嵌套元素如 何在 3D空间中呈现。他主要有两个属性值：flat和 PR eserve-3d。
transform-style属性的使用语法非常 简单 ：
CSS Code 复制内容到剪贴板
transform-style:&nbs p; flat | preserve-3d
其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴 方向 旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面 或者 后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。
transform-style属性需要设置在父元素中，并且高于任何嵌套的 变形 元素。最后，我们运用一个翻转的例子，来加深一下对transform-style属性的印象：
HT ML 模板
XM L/HTML Code 复制内容到剪贴板
< div class = "wrap" > < div class = "spin" > < div class = "rotate" > < img src = "images/cardKingCl ub .png" alt = "" width = "142" h ei ght = "200" /> </ div > </ div > </ div > < div class = "wrap" > < div class = "spin" > < div class = "rotate t hr ee-d" > < img src = "images/cardKingClub.png" alt = "" width = "142" height = "200" /> </ div > </ div > </ div >
CSS
CSS Code 复制内容到剪贴板
.wrap { width : 500px ; height : 300px ; m arg in : 30px auto ; pos IT ion : relative ; background : url (images/bg-grid. jpg ) no-re PE at center center ; background - size : 100% 100%; } /*设置动画*/ @keyfr am es spin{ 0%{ transform:rotateY(0 deg ) } 100%{ transform:rotateY( 360 deg) } } .spin { width : 142px ; height : 200px ; position : absolute ; top : 50%; left : 50%; mar gin -left : - 72px ; margin -t op : - 101px ; border : 1px dashed orange; cursor : pointer ; transform-style: preserve-3d; } /*调用动画*/ .spin:hover{ animation:spin 5s linear infinite; } .rotate { background : url (images/cardKingClub.png) no-repeat center ; background - size : 100% 100%; border : 5px solid hsla(50,50%,50%,.9); transform: perspective( 200px ) rotateY(45deg); } .rotate img{ border : 1px solid green ; transform: rotateX(15deg) translateZ( 10px ); transform-origin: 0 0 40px ; } /* 改变 transform-style的默认值*/ .three-d { transform-style: preserve-3d; }
特别声明：为了 节省 篇幅，代码中CSS3属性代码省去了各浏览器的私有前缀，在实际操作中，需要将各浏览器前缀加上，才会有效果。
其效果如下所示：
正如您所看到的，当元素设置.rotate设置了flat值时，其子元素img不会根据translateZ()值摊开，而在同一平面旋转，如上图上部分所示；当元素.rotate设置了preserve-3d值时，其子元素img会根据translateZ()值摊开，不再会 堆叠 在一起，如上图下部分所示。
有 一点 需要特别提醒大家，如果你的元素设置了transform-style值为preserve-3d，就不能为了 防 止子元素溢出容器而设置overflow值为hidden，如果设置了overflow:hidden同样可以迫死子元素出现在同一平面（和元素设置了transform-style为flat一样的效果），如下图所示：
总结
以上是 为你收集整理的 CSS3中设置3D变形的transform-style属性详解 全部内容，希望文章能够帮你解决 CSS3中设置3D变形的transform-style属性详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3中设置3D变形的transform-style属性详解的详细内容...