IT兄弟连 HTML5教程 CSS3属性特效 3D变换1

3D变换较2D变换多了一下的转换属性，3D转换属性及描述如表1:

表1  3D转换属性

3D的转换方法如表2：

表2  3D转换方法

   

1  transform-style

transform-style经常被用来做三维空间坐标系中的图形变换，下面我们就来看看CSS3中设置3D变形的transform-style属性详解。transform-style指定嵌套元素如何在3D空间中呈现。主要有两个属性：flat和perserve-3d。

transform-style属性的使用语法如下：

transform-style: flat | perserve-3d;

其中flat值为默认值，表示所有子元素在2D平面呈现。perserve-3d表示所有子元素在3D空间中呈现。transform-style属性需要设置在父元素中，并且高于任何嵌套的变形元素。

2  perspective景深

perspective景深属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D平面上，并且变换结果中将不存在景深的概念。其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由它决定，值越小，用户和3D空间Z平面距离越近，视觉效果更令人深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就不那么深刻。

perspective属性的使用语法如下：

perspective: none | <length>;

perspective属性包括两个属性：none和具有单位的长度值。其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平面的。另一个<length>接受一个长度单位大于0的值。而且其单位不能为百分比值。<length>值越大，角度出现的越远，从而创建一个相当低的强度和非常小的3D空间变化。反之，此值越小，角度出现得越近，从而创建一个高强度的角度和一个大型的3D变化。

下面通过一个小案例来加深一下对perspective的印象。代码如下：

这里有两个div，每个div里包含一张图片。每个div都建立3D空间，让图片绕着Y轴旋转45deg。不同的是，我们为第二个div设置600px的景深，第一张没有设置。在浏览器中查看，运行效果如图1：

图1  perspective景深

从上图，我们可以看出两张图的差别。在父节点没有设置perspective的情况下，图片的3D旋转效果不明显，而在父节点设置perspective后，图片才有3D旋转的效果。