CSS动画-2
#6.2 接上。 2D、3D转换 Transform
转换Transform
CSS3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它为分2D转换 或 3D 转换。
2D转换
通常的属性包含了属性名和属性值,而CSS3的transform属性是用函数来定义的。Transform 2D函数包括了translate( )、scale( )、rotate( )和skew( )。#移动/旋转/缩放/倾斜
书写格式: transform:函数名(x轴值,y轴值);
转换的效果:
1.translate( )函数
translate( )方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。接受CSS的标准度量单位(px)
translate(x,y):转换,沿着X和Y轴移动元素。
2.rotate( )
通过 rotate( ) 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。它以deg为单位,代表了旋转的角度。
3.scale( )
通过值把宽和高转换为原始尺寸的n倍,接受一/两个参数,前面的为水平/宽,后面的为垂直/高。
可取值:
默认值为1 缩小:0-1之间的数 放大:大于1的数
4.skew( ) //不常用
根据水平轴和垂直轴翻转,接受两个或一个值,两个值时前面为水平,后面为垂直的角度 ,一个值只是水平轴的角度。此函数是指元素的倾斜角度。skewx()/skewy()也可。
3D转换
Transform 3D常用函数有:
##用到。 perspective 透视(呈现3d效果)。e.g. 400px 便于呈现好的视觉效果