css3-Transform与css3-Transition

css3-Transform
rotate(angle):定义2D旋转，在参数中规定角度。
rotateX(angle):定义沿着X轴的3D旋转。
rotateY(angle):定义沿着Y轴的3D旋转。
rotateZ(angle):定义沿着Z轴的3D旋转。
scale(x,y):定义2D缩放旋转。
scale3d(x,y,z):定义3D缩放旋转。
scaleX(x):通过设置X轴的值来定义缩放旋转。
scaleY(y):通过设置Y轴的值来定义缩放旋转。
scaleZ(z):通过设置Z轴的值来定义缩放旋转。
浏览器支持：
Internet Explorer 10、Firefox、Opera支持transform属性。
Internet Explorer 9支持替代的-ms-transform属性（仅适用于2D旋转）。
Safari和Chrome支持替代的-webkit-transform属性（2D和3D转换）。
Opera只支持2D旋转。

.link .icon:hover{
    transform: rotate(360deg) scale(1.2);
    -moz-transform:rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
    -webkit-transform:rotate(360deg) scale(1.2);
    -o-transform: rotate(360deg) scale(1.2);
}

css3-Transition
定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property、transition-duration、trnasition-timing-function、transition-delay
语法：
transition:property、duration、timing-function、transition-delay
值描述：
transition-property：规定设置过渡效果的css属性的名称。
transition-duration：规定完成过渡效果需要多少毫秒或秒。
trnasition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。

.link .icon{
    display: inline-block;
    width: 100%;
    height: 190px;
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
    /*ease:慢-快-慢，ease-out:快-慢，ease-in:慢-快*/
}