css3-定时缓动效果与块旋转

先来了解一下两个css3的属性(当前学习到并理解的属性)

1.transform(变换)

语法：
transform ： none | <transform-function> [ <transform-function> ]*


取值：
scale(<number>[, <number>])
提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale（2D缩放）。如果第二个参数未提供，则取与第一个参数一样的值。
scaleX(<number>) ：
使用 [sx,1] 缩放矢量执行缩放操作，sx为所需参数。
scaleY(<number>) ：
使用 [i,sy] 缩放矢量执行缩放操作，sy为所需参数。
rotate(<angle>) ：
通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。


实际演示：
-webkit-transform:rotate(10deg);//顺向旋转10度，其中deg为度的意思，反方向的话用负值
-webkit-transform:scala(1.5);//放大1.5倍
两者可以合并写法是
-webkit-transform:rotate(10deg) scala(1.5);

2.transition(过度)

语法：
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*


取值：
transition-property:
需要过度的属性
transition-duration:
过度执行的时间（以s为单位）
transition-timing-function:
过度的缓动


ease：ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
linear：linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
ease-in：ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
ease-out：ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
ease-in-out：ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier：特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

实际演示：

-webkit-transition:all 0.5s ease-in;合并写法


利用a 的hover来制作移动上去变换的效果

a{
display:block;
width: 100px;
height: 100px;
border:solid 1px #9A9A9A;
background-color: white;
box-shadow:  5px 5px 5px gray;
-webkit-transform:rotate(10deg);
-webkit-transition:all 0.5s ease-in;
}
a:hover{
-webkit-transform:rotate(0deg) scale(1.05)
}

<a href=""></a>