CSS3骚样式之一
利用transform改变元素样式，旋转，缩放，移动，倾斜等，再结合animation添加更多效果，最后以动画的方式展示，可以做出很多令人眼前一亮的页面效果，
多数情况下，同样的页面内容，适当的加入一些炫酷效果，总是能加分的！所以学好这两个属性，相当重要。
一、transform
改变元素样式，旋转，缩放，移动，倾斜等，不会影响到其他元素的位置(不包括覆盖)。
1、偏移量（移动元素）
translate(x,y)，定义 2D 转换；
translate3d(x,y,z)，定义 3D 转换；
也可以单独使用一个方向的值：translateX(x)、translateY(y)、translateZ(z)。
注：X轴取值移动，正右负左；Y轴取值移动，正上负下；Z轴取值移动，正出负进。
2、旋转（默认值为Z轴）
rotate(angle)，定义 2D 旋转；
rotate3d(x,y,z,angle)，定义 3D 旋转；
也可以单独使用一个方向的值：rotateX(angle)、rotateY(angle)、rotateZ(angle)。
注：angle，角度（45deg或-45deg）,正值顺时针旋转，负值逆时针旋转。
3、倾斜（会改变形状）
skew(x-angle,y-angle)，定义沿着 X 和 Y 轴的 2D 倾斜转换；
skewX(angle)、skewY(angle)。
注：有点难以形容...谁用谁知道哦！~
4、大小变化（1为原本大小）
scale(x,y)，定义 2D 缩放转换；
scale3d(x,y,z)，定义 3D 缩放转换；
也可以单独使用一个方向的值：scaleX(x)、scaleY(y)、scaleZ(z)。
注：小于1缩小，大于1放大，一般使用就给一个值：scale(2)，放大一倍；给多值变化有点走样...谁用谁知道哈！~
注注：讲道理，我没有试过给负值！
缩写方式：transform:scale(0.8) rtate(45deg) skew(45deg) translate(12px,20px);（两个或几个一起）。
二、transition
transition，过渡，元素从一种样式逐渐改变为另一种的效果，当鼠标hover时改变 ，当指针移出元素时，逐渐变回原来的样式，变化会影响到其他元素（直接挤开）。
因为改变会影响其他元素位置，所以必须要特定的地方才好使，感觉用的比transform少，但是同样也骚，特殊情况会有奇效。
1、transition-property
规定应用过渡的 CSS 属性的名称，默认为all,可以是单独的：width或height；也可以是几个一起的列表，列表以逗号分隔。
注：支持transition的属性都可以设置数字属性值。
2、transition-duration
定义过渡效果花费的时间，默认是 0。
注：transition-duration必须给值，否则持续时间为0，transition不会有任何效果。
3、transition-timing-function
规定过渡效果的时间曲线。默认是 "ease"。
| linear | 动画从头到尾的速度是相同的 |
| ease | 默认值，动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值 |
4、transition-delay
规定在过渡效果开始之前需要等待的时间，以秒或毫秒计，默认为0。