原标题:CSS3三维变形,其实很简单!
本文主要内容一、前言二、坐标轴系统三、透视与变形风格四、3D变形函数五、实例展示六、总结一、前言
所谓的三维变形,无外乎就是在二维平面的基础上进而实现三维立体空间的形变。上两周我们详细的讲解了二维变形的相关操作,本文将详细的介绍关于transform3D变形的内容,但是仍然以2D变形为基础。期中3D变形还涉及到的属性有transform、transform-style、perspective。
二、坐标轴系统
在了解其他相关的操作之前,首先要了解的是三维坐标系统。3D变形与2D变形的最大不同就在于其参考的坐标轴不同,2D变形的坐标轴是平面的,只存在X轴和Y轴,而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间,X轴正向是朝右,Y周正向是朝下,Z轴正向是朝屏幕外。如下图:
三、透视与变形风格
1、透视perspective
透视是transform变形3D中最重要的内容。如果不设置透视,元素的3D变形效果将无法实现。为此需要使用到这样的一个属性——perspective。
perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置,并将可视内容映射到一个视面上,继而投到一个2D视平面上。如果不指定透视,则Z轴空间中的所有点将平铺到同一个2D视平面中,并且变换结果中将不存在景深概念。
上面的描述可能让人难以理解一些,其实对于perspective属性,可以简单的理解为视距,用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定,值越小,用户与3D空间Z平面距离越近,视觉效果更令人印象深刻;反之,值越大,用户与3D空间Z平面距离越远,视觉效果就很小。
其取值的情况如下:
透视perspective不可为0和负数,因为观察者与屏幕距离为0时或者在屏幕背面时是不可以观察到被透视元素的正面的。