transform-style属性用来指定嵌套元素是怎样在三维空间中呈现。当值为flat时，表示所有子元素在2D平面呈现；值为preserve-3d时，表示所有子元素在3D空间中呈现。
CSS3 transform-style属性
作用：transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
语法：
transform-style: flat|preserve-3d;
flat：子元素将不保留其 3D 位置。
preserve-3d：子元素将保留其 3D 位置。
注：该属性必须与 transform 属性一同使用。
CSS3 transform-style属性的使用示例
<!DOCTYPE html><html><head><style>#div1{position: relative;height: 200px;width: 200px;margin: 100px;padding:10px;border: 1px solid black;}#div2{padding:50px;position: absolute;border: 1px solid black;background-color: red;transform: rotateY(60deg);transform-style: preserve-3d;-webkit-transform: rotateY(60deg); /* Safari and Chrome */-webkit-transform-style: preserve-3d; /* Safari and Chrome */}#div3{padding:40px;position: absolute;border: 1px solid black;background-color: yellow;transform: rotateY(80deg);-webkit-transform: rotateY(-60deg); /* Safari and Chrome */}</style></head><body><div id="div1"> <div id="div2">HELLO <div id="div3">YELLOW</div> </div></div></body></html>效果图：
