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 的形式进行呈现,增强了网页的视觉效果。同时,该属性在各大主流浏览器中都有良好的兼容性,使用时无需担心浏览器兼容问题。