2D转换及过渡属性

transform属性

1.平移：
transform：translate(x轴距离，y轴距离)

1.参数可以设置为百分比，相当于以自身大小为基准，移动百分比的距离
Eg：transform：translate(x轴距离，y轴距离)
向右移动自身的一半，向下移动自身大小的一半
2.translate 复合元素，不会引起重绘回流
3.translate类似定位，不会影响其他元素的位置
4.对行内标签无效

2.旋转：
transform：rotate(?deg)

deg:角度单位,旋转点默认为该元素的正中心。正值顺时针，负值逆时针。

transform-origin

设置旋转中心

transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
transform-origin:top left; 左上角 和 transform-origin：0 0;相同
transform-origin:50px 50px; 距离左上角 50px 50px 的位置
transform-origin：0; 只写一个值的时候 第二个值默认为 50%;

transform：scale(int)

2d缩放(基于自身元素大小进行缩放)
scale(放大或缩小倍数) 放大倍数可正可负，负值缩小
scale(x轴放大倍数，y轴放大倍数)

transform:scale(1,1) 放大一倍 相对于没有放大
transform:scale(2,2) 宽和高都放大了2倍
transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2)
transform:scale(0.5,0.5) 缩小
transform:scale(-2,-2) 反向放大2倍 很少用负数 容易让人产生误解

hover与width、height也可以实现元素放大缩小的效果，但需要注意的是：hover作用于元素本身的大小，但不作用于该元素的背景，比如与background-size连用就失效了

transition属性

用于设置过渡时长
transition(transition-property,transition-duration,transition-timing-function,transition-delay)

transition-property
none 没有过渡动画。
all 所有可被动画的属性都表现出过渡动画。
IDENT 属性名称。由小写字母 a 到 z，数字 0 到 9，下划线（_）和破折号（-）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ，表示不出现过渡动画。

transition-timing-function 会建立一条运动曲线，因此在整个transition变化过程中，变化速度可以不断改变。
默认值：ease
规定慢速开始，然后变快，
（相对于匀速，中间快，两头慢）。
ease-in
规定以慢速开始的过渡效果
（相对于匀速，开始的时候慢，之后快）
ease-out
规定以慢速结束的过渡效果
（相对于匀速，开始时快，结束时候间慢，）
ease-in-out
规定以相同速度开始至结束的过渡效果（中间快，两头慢）
linear
匀速过渡

transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。