一、transform-style
1、transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。
有两个属性值：flat和preserve-3d。
transform-style属性的使用语法非常简单： transform-style: flat | preserve-3d
其中flat值为默认值，表示所有子元素在2D平面呈现。
2、preserve-3d表示所有子元素在3D空间中呈现。
如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2D平面中进行呈现。沿着X轴或Y轴方向旋转该元素将导致位于正或负Z轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。如果对一个元素设置了transform-style的值为preserve-3d，它表示不执行平展操作，他的所有子元素位于3D空间中。
二、perspective属性
perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。
其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。 在3D变形中，对于某些变形，例如下面的示例演示的沿Z轴的变形，perspective属性对于查看变形的效果来说必不可少。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3d</title> 6 <style> 7 .out{ 8 width: 500px; 9 height: 500px; 10 border: 1px solid #000; 11 background-color: pink; 12 margin:100px auto; 13 transform: rotateY(60deg); 14 /*可以让里面的盒子保持3d效果,加给父盒子*/ 15 transform-style: preserve-3d; 16 } 17 .in{ 18 width: 300px; 19 height: 400px; 20 margin: 50px auto; 21 background-color: green; 22 transform: rotateX(130deg); 23 } 24 </style> 25 </head> 26 <body> 27 <div class="out"> 28 <div class="in"></div> 29 </div> 30 </body> 31 </html>
运行效果：
三、backface-visibility属性
backface-visibility属性决定元素旋转背面是否可见。对于未旋转的元素，该元素的正面面向观看者。当其Y轴旋转约180度时会导致元素的背面面对观众。
backface-visibility属性使用语法很简单：
backface-visibility: visible | hidden
该属性被设置为以下两个关键词之一：
- visible：为backface-visibility的默认值，表示反面可见
- hidden：表示反面不可见
案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 background-color: deepskyblue; 9 } 10 .box{ 11 width: 300px; 12 height: 300px; 13 border:1px solid #000; 14 margin:100px auto; 15 position: relative; 16 } 17 .box::after,.box::before{ 18 content:""; 19 position: absolute; 20 width: 100%; 21 height: 100%; 22 border-radius: 50%; 23 background-color: pink; 24 background: url("images/bg.png") no-repeat left top; 25 transition: 1s; 26 /*让盒子背面隐藏*/ 27 backface-visibility: hidden; 28 } 29 .box::before{ 30 transform: rotateY(-180deg); 31 } 32 .box::after{ 33 background-position: right top; 34 } 35 .box:hover::before{ 36 transform: rotateY(0deg); 37 } 38 .box:hover::after{ 39 transform: rotateY(180deg); 40 } 41 </style> 42 </head> 43 <body> 44 <div class="box"></div> 45 </body> 46 </html>
运行效果：
