css3变形

1、旋转 rotate() 通过指定的角度参数使元素相对远点进行旋转，主要在二维空间内进行旋转，设置一个角度用来指定旋转的幅度。为正值，顺时针旋转，为负值，相对中心原点逆时针旋转。

 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
  transform:rotate(20deg);

2、扭曲 skew() 能够让元素倾斜显示，可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜，与rotate()函数的旋转不同，rotate() 只是旋转，不会改变元素形状，skew() 函数不会旋转，而只会改变元素的形状。

 -webkit-transform:skew(-45deg,-45deg);
  -moz-transform: skew(-45deg,-45deg);
  transform:skew(-45deg,-45deg);  

3、缩放 scale() 让元素根据中心原点对对象进行缩放

    scale()的默认值为1，当值设置为0.01 到 0.99之间的任何值，作用使一个元素缩小；

     任何大于或等于1.01的值，作用是让元素放大

 -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  transform: scale(1.5);

4、translate() 可以将元素向指定的方向移动，类似于position中的relative.
     使用translate()函数可以把元素从原来的位置移动，而不影响在X/Y轴上的任何web组件。

 -webkit-transform: translate(50px,100px);
  -moz-transform:translate(50px,100px);
  transform: translate(50px,100px);

5、矩阵 matrix() 是一个含6个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个【a,b,c,d,e,f】变换矩阵，就是基于水平方向（ X轴）和垂直方向（Y轴）重新定位元素。

  -webkit-transform: matrix(1,0,0,1,50,50);
  -moz-transform:matrix(1,0,0,1,50,50);
  transform: matrix(1,0,0,1,50,50);

6、原点 transform-origin 默认情况下，中心点是居于元素X轴和Y轴的50%处。

    在没有重置transform-origin改变元素原点位置的情况下，css变形进行的旋转、位移缩放，扭曲等操作都是以元素自己中心位置进行变形。可以通过transfrom-origin来对元素进行原点位置改变，是元素原点不在元素中心位置，已达到需要的原点位置。
transfrom-origin取值和background-position取值类似。

  -webkit-transform: skew(15deg);  倾斜15度
  -moz-transform: skew(15deg);
  transform: skew(15deg);
  -webkit-transform-origin: top right; //原点重置到右上角
  -moz-transform-origin: top right;
  transform-origin: top right;

7、过渡属性 transition-property  通过鼠标的单击，获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

CSS中创建简单的过渡效果步骤：

    第一，在默认样式中声明元素的初始状态样式。

    第二，声明过渡元素最终状态样式，比如悬浮状态。

    第三，在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3的过渡transition属性是一个复合属性，主要包括以下几个子属性：

     transition-perperty: 指定过渡或动态模拟的CSS属性

     transition-duration:指定完成过渡所需的时间

     transition-timing-function: 指定过渡函数

     transition-delay: 指定开始出现的延迟时间

transition-property 用来指定过度动画的css属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，对应具有过渡的CSS属性主要有：

当“transition-property”属性设置为all时，表示的是所有中心值的属性。

假设你的初始值状态设置了几个属性，在终始状态都改变了这三个属性，那么all代表的就是那几个属性的值。

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition: width;
  transition: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;  //过渡所需时间
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;  //过渡函数
  -webkit-transition-delay: .18s;
  	transition-delay:.18s;  //过渡开始出现的延迟时间
}
div:hover {
  width: 400px;
}

8、过渡函数 transition-timing-function 属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数

 -webkit-transition-timing-function:linear;
  transition-timing-function:linear;

9、过渡延迟

//   悬浮出发过渡方式，过渡0.2s后出发，整个过渡时间持续0.5s
  transition: all .5s ease-in .2s;
-webkit-transition: all .5s ease-in .2s;
  transition: all .5s ease-in .2s;