css3中变形属性

过渡：transition允许css的属性值在一定的时间区间内平滑地过渡。
：transition:all/具体属性值 过渡时间s/ms 延迟时间s/ms 动画类型（linear）匀速
通过事件来触发（鼠标滑过）来改变css的值。
变形属性：transform
1 、位移 transform： translate( x y) 位移时占空间 支持过渡
将元素向指定的方向移动，类似于position中的relative。
水平移动：向右移动translate(tx,0)和向左移动translate(-tx,0)；
垂直移动：向上移动translate(0,-ty)和向下移动translate(0,ty);
对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)。
2、缩放 transform：scale( x y) 这两个参数为一个数字
让元素根据中心原点对对象进行缩放。默认的值1’
大于1 为放大 小于1 为缩小
3、旋转 transform： rotate( deg)函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
4、 倾斜 transform： skew( deg )函数能够让元素倾斜显示。
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
变形原点：transform-origin{} 属性值：left/top/right/bottom 可以px % ，也可以为负值、。
元素默认基点就是其中心位置