CSS3 transform-style 属性

CSS3 transform-style 属性技术文档

什么是 CSS3 transform-style 属性

CSS3 transform-style 属性规定使用 3D 变换的元素如何在其父元素中呈现。

CSS3 transform-style 属性是 CSS3 转换模块的一部分。

在 CSS3 中，使用 transform 使元素进行 3D 变换。而 transform-style 属性则规定了这些进行了 3D 变换的元素如何在其父元素中显示。

默认情况下，进行 3D 变换的元素是在其父元素的平面上进行呈现的。但如果使用了 transform-style 属性，可以根据需要让元素以 3D 的形式呈现出来。

transform-style 属性可用于块级元素。

CSS3 transform-style 属性的语法

transform-style: preserve-3d|flat|initial|inherit;

preserve-3d：元素保持 3D 呈现，其子元素在三维空间内呈现。
flat：元素进行 3D 变换，但子元素沿着父元素的平面进行展示。
initial：将属性设置为默认值（preserve-3d）。
inherit：从父元素继承该属性的值。

CSS3 transform-style 属性的实例

实例 1

让一个元素在其父元素中以 3D 形式进行呈现：

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 transform-style 属性</title>
	<style type="text/css">
		.box{
			transform-style: preserve-3d;
		}
	</style>
</head>
<body>
	<div class="box">This is a 3D box</div>
</body>
</html>

实例 2

让一个元素在其父元素中保持平面呈现：

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 transform-style 属性</title>
	<style type="text/css">
		.box{
			transform-style: flat;
		}
	</style>
</head>
<body>
	<div class="box">This is a 2D box</div>
</body>
</html>

CSS3 transform-style 属性的浏览器支持

CSS3 transform-style 属性在目前的主流浏览器中都有良好的支持，包括：Chrome、Firefox、Safari、Opera 和 IE9 及以上版本。

总结

CSS3 transform-style 属性是进行 3D 变换时非常重要的一个属性。通过它可以让元素按照 3D 的形式进行呈现，增强了网页的视觉效果。同时，该属性在各大主流浏览器中都有良好的兼容性，使用时无需担心浏览器兼容问题。

CSS3 transform-origin 属性 CSS3 transition 属性