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旋转的效果。