CSS3的过渡效果分2D过渡和3D过渡。
2D过渡:对象的所有关键点都可以通过XY坐标表达出来。该对象一直在一个平面上。
3D过渡:对象的轨迹或者路径没法只用XY坐标就可以表达出来,还需要一个Z轴数值来表达。
说白了就是我们常说的二维效果和三维效果。(下方为视频,请点击播放按钮查看演示效果。)
下面是一个简单的2D效果和3D效果的演示:



大家暂时不必去研究示例的代码是怎么执行的。大概了解一下两者区别就行。
 
那么,一个是平面,一个是三位空间,我们对属性设置值的时候一定要先了解,正负值代表的含义。
所以,一定要了解坐标,如下:
3d_axes
这个跟数学中学的稍有差异。大家熟悉一下。
 
咱的课堂讲到这里,每个人都有自己的一套学习方法。所以,下面的内容我就不作详解。我就简单介绍一下。
 

CSS3 2D Transforms

 

translate()

相对于当前自身位置开始偏移指定距离。
语法:transform: translate(x,y);
例,相对自身右移30px,下移20px。

 

rotate()

可以使元素顺时针或者逆时针方向转动。
正值为顺时针,负值为逆时针。
语法:transform: rotate(angle);
angle为角度。
例,顺时针20度。

 

scale()

可以使元素按一定比例放大或者缩小。
语法:transform: scale(相对宽,相对高);
例,宽高各放大2.5倍:

 

skewX()

该方法可以让元素相对X轴倾斜指定角度。
 

matrix()

该方法初学者学起来比较吃力,这里暂时不讲了。当然,你也可以自学。
不愿意学的,完全可以使用现成的matrix工具嘛:
http://www.css88.com/tool/css3Preview/Transform-Matrix.html
该页面可以通过预览,拖动按钮,直接生成matrix参数。
 
下面就用列表的形式总结一下2D过渡效果。
 

Function Description
matrix(n,n,n,n,n,n) 定义2D转换,使用6值矩阵
translate(x,y) 定义2D转换,使元素按X轴和Y轴移动
translateX(n) 定义2D转换,使元素按X轴移动
translateY(n) 定义2D转换,使元素按Y轴移动
scale(x,y) 定义2D缩放转换,通过设置宽高,使元素放大或缩小
scaleX(n) 定义2D缩放转换,通过设置宽,使元素放大或缩小
scaleY(n) 定义2D缩放转换,通过设置高,使元素放大或缩小
rotate(angle) 定义2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

 
那么理解了2D过渡效果,理解3D就会简单很多。只是多了一个因素Z轴。
 

CSS3 3D Transforms

 
举例,元素以Y轴进行3D旋转,使用translateY()方法。查看演示视频:


该效果相关代码如下:
HTML部分代码:

CSS部分代码如下:

是不是有感觉了呢?其它几个过渡效果的使用方法其实都是大同小异的。
 
下面依然以列表的形式总结3D transform:

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4×4 矩阵。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义 3D 转换,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转换,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转换,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
本篇文章相关标签: