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>#p1{position: relative;height: 200px;width: 200px;margin: 100px;padding:10px;border: 1px solid black;}#p2{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 */}#p3{padding:40px;position: absolute;border: 1px solid black;background-color: yellow;transform: rotateY(80deg);-webkit-transform: rotateY(-60deg); /* Safari and Chrome */}</style></head><body><p id="p1"> <p id="p2">HELLO <p id="p3">YELLOW</p> </p></p></body></html>效果图：
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）