css3变形及动画的小知识点

1.变形-旋转rotate()

<div class="wrapper">
 <div><span>我不想旋转</span></div>
</div>

.wrapper span {
  display:block;  //特别注意，使用这个属性时需要把非块元素转化为块元素
 -webkit-transform:rotate(20deg);
 -moz-transform:rotate(20deg);
  transform:rotate(20deg);
 }

2.变形-扭曲skew()

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

div{
  -webkit-transform:skew(-45deg);
  -moz-transform:skew(-45deg);
  transform:skew(-45deg);
}

3.变形-缩放scale()

缩放 scale()函数让元素根据中心原点对对象进行缩放。

缩放 scale 具有三种情况：

I、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。例如：

div:hover {
  -webkit-transform: scale(1.5,0.5);
  -moz-transform:scale(1.5,0.5)
  transform: scale(1.5,0.5);
}

II、scaleX(x)元素仅水平方向缩放（X轴缩放）

div:hover {
  -webkit-transform: scaleX(1.5);
  -moz-transform:scaleX(1.5)
  transform: scaleX(1.5);
}

III、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

4、变形-位移 translate()

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

<div class="wrapper">
我不知道我的宽度和高是多少，我要实现水平垂直居中    
</div>

.wrapper {
  padding: 20px;
  background:orange;
  color:#fff;
  position:absolute;
  top:50%;
  left:50%;
  border-radius: 5px;
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

5.定位圆点 transform-origin　　

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。transform-origin取值和元素设置背景中的background-position取值类似:

示例展示：

通过transform-origin改变元素原点到左上角，然后进行顺时旋转45度。

<div class="wrapper">
  <div>圆点定位在左上角</div>
</div>

.wrapper div {
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

6.动画transition

div{
100px;
-webkit-transition: all .5s ease-in .18s;  // 表示所有属性在0.18s后触发动画，以ease-in的速度曲线，历时0.5秒
}
div:hover{
　　200px;
}

7.动画 animation 与关键帧 keyframes 的使用：

.box{
-webkit-animation: 1s animate_box ease infinite;
//表示动画持续时间为1s，动画名字是animate_box，变化曲线，infinite表示无限循环播放，控制动画播放次数，也可以换成其他数字，不写的话相对于1，只播放一次
}

//规定动画各个阶段的状态和动画名字
@-webkit-keyframes animate_box{
0%{background-position: 0 0;}
50%{background-position: -243px 0;}
100%{background-position: -486px 0;}
}

还有另外一种效果，steps( )的用法

.box.animate{
-webkit-animation: 1s animate_box steps(2) infinite;
//steps（2）表示每个关键帧分两步播放,比如0%到50%这段动画中再分两步播放
}

@-webkit-keyframes animate_box{
0%{background-position: 0 0;}
50%{background-position: -243px 0;}
100%{background-position: -486px 0;}
}

8.动画 animation 与transiton的区别是：I、transiton 单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，没法再网页加载时自动发生，他可触发的方式有： :hoever :focus :checked 媒体查询触发 ,js触发

transition的发生是一次性的，不能重复发生，除非再次触发。只能定义开始和结束状态，不能定义中间状态。一条transition规则只能定义一个属性的变化，不能涉及多个属性。

而 animation 可以在没有触发事件的情况下随时间变化改变属性，而且还可以重复，可以定义很多状态，从而达到动画效果。

9、让动画最终的状态停止在自定义的状态而非原始状态的方法：

//把属性分开写是这样
-webkit-animation-fill-mode: forwards;

-webkit-animation: 1s animate_box ease forwards;

//把属性合起来写是这样

10、设置动画的播放状态

<div><span></span></div>

div span{
    animation-play-state:running; //本来是播放状态
}
div span:hover{
    animation-play-state:paused; //鼠标悬浮是停止状态
}