css3变形与动画（上）

CSS3动画:

 1、旋转 rotate(n)

旋转函数rotate()通过指定的角度参数使元素相对原点进行旋转；

    n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转。

例：

CSS部分中的“.wrapper div”展示的效果：(n为参数，用于设置旋转的角度，如果为负，元素相对原点中心逆时针旋转；)

CSS部分中的“.wrapper span”展示的效果：(n为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；)

2、扭曲skew()

定义：元素倾斜显示，将对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。

3种使用情况：

 

1. skew(x,y)元素同时在水平方向和垂直方向扭曲；
2. skewX(x)元素仅在水平方向扭曲；
3. skewY(y)元素仅在垂直方向扭曲；

例：

HTML部分：

<div class="wrapper">

 <div><span>我不想旋转(^_^)</span></div>

</div>

 

CSS部分：

.wrapper {

  margin: 100px auto;

  width: 300px;

  height: 200px;

  border: 2px dotted blue;

}

 

.wrapper div{

  width: 300px;

  height: 200px;

  line-height: 200px;

  text-align: center;

  background: green;

  color: #fff;

  -webkit-transform: skew(45deg);

  -moz-transform: skew(45deg);

  transform: skew(45deg);

}

.wrapper span {

  display:block;

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

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

  transform: skew(-45deg);

 }

3、缩放scale()

定义：让元素根据中心原点对对象进行缩放。

 

3种使用情况：

1. scale(x,y) 使元素水平方向和垂直方向同时缩放；
2. scaleX(x) 元素仅水平方向缩放；
3. scaleY(y) 元素仅垂直方向缩放；

 

注意：

scale()的取值默认为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于等于1.01的值，作用让元素放大。

例：

HTML部分：

<div class="wrapper">

  <div>我将缩小0.8</div>

</div>

 

CSS部分：

.wrapper {

  width: 200px;

  height: 200px;

  border:2px dashed red;

  margin: 100px auto;

}

 

.wrapper div {

  width: 200px;

  height: 200px;

  line-height: 200px;

  background: orange;

  text-align: center;

  color: #fff;

}

 

.wrapper div:hover {

  opacity:0.5;

  -webkit-transform: scale(0.8);

  -moz-transform: scale(0.8);

  transform: scale(0.8);

}

Transform：属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

4、位移translate

定义：元素向指定的方向移动；

 

三种情况：

1. translate(x,y)水平方向和垂直方向同时移动；
2. translateX(x)仅水平方向移动；
3. translateY(y)仅垂直方向移动；

 

例：

HTML部分：

<div class="wrapper">

我不知道我的宽度和高是多少，我要实现水平垂直居中   

</div>

CSS部分：

.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、矩阵 matrix()

语法：matrix(a,b,c,d,e,f);

参数说明： a 表示水平伸缩；b表示垂直扭曲；c表示水平扭曲；d表示垂直伸缩；e表示水平位移；f表示垂直位移；

 

SO……matrix(scaleX(x),skewY(y),skewX(x),scaleY(y),translateX(x),translateY(y));

 

例：

HTML部分：

<div class="wrapper">

  <div></div>

</div>

 

CSS部分：

.wrapper {

  width: 300px;

  height: 200px;

  border: 2px dotted red;

  margin: 40px auto;

}

.wrapper div {

  width:300px;

  height: 200px;

  background: orange;

  -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的作用在于可以改变原点位置，是元素原点不在中心位置。

 

取值：

关键词	百分比
top=top center=center top	50%  0
right=right center=center right	100%或（100% 50%）
Bottom=bottom center=center bottom	50%  100%
left=left center=center left	0或（0 50%）
center = center center	50%或（50% 50%）
top left=left top	0  0
right top=top right	100%  0
bottom right=right bottom	100% 100%
bottom left=left bottom	0 100%

例：

<div class="wrapper">

  <div>原点在默认位置处</div>

</div>

<div class="wrapper transform-origin">

  <div>原点重置到左上角</div>

</div>

CSS部分：

.wrapper {

  width: 300px;

  height: 300px;

  float: left;

  margin: 100px;

  border: 2px dotted red;

  line-height: 300px;

  text-align: center;

}

.wrapper div {

  background: orange;

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

}

.transform-origin div {

  -webkit-transform-origin: left top;

  transform-origin: left top;

}

7、动画过渡 transition

transition是一个复合属性，包含以下几个子属性：

1. transition-property：指定过渡或动态模拟的CSS属性；
2. transition-duration：指定过渡完成所需的时间；
3. transition-timing-function：指定过渡函数；
4. transition-delay：指定开始出现的延迟时间；

 

1)transition-property

具有过渡动画的CSS属性有：

注意：当”transition-property”的属性值为all时，表示的是所有初始状态设置了样式的属性；

2)transition-duration

该属性主要用于设置一个属性过渡到另一个属性所需的时间，即持续时间；

 

3)transition-timing-function

即“缓冲函数”，指      ，包括以下几种：

4)transition-delay

设置一个动画开始执行的时间；

 

 

综上，transition的语法：

transition:transition-property,transition-duration,transition-timing-function,transition-delay;

 

例：

HTML部分：

<div></div>

 

CSS部分：

div {

  width: 200px;

  height: 200px;

  background: red;

  margin: 20px auto;

  -webkit-transition-property: width;

  transition-property: 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;

/*-webkit-transition :width 0.5s ease-in 0.18s;

transition:width 0.5s ease-in 0.18s; */

}

div:hover {

  width: 400px;

}

transition:all(所有属性) 5s（过度的时间）ease过度属性 .2s延迟的时间