css3

一.转换transform

1.谷歌和Safari需要前缀-webkit-，IE9需要前缀-ms-。

2.2D转换方法：translate(),rotate(),scale(),skew(),matrix()

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

3.3D转换方法：rotateX(),rotateY().

支持浏览器有：IE10,火狐，谷歌和Safari需要前缀-webkit-，欧朋不支持3D属性。

二.过渡transition

1.支持浏览器：IE10，火狐，谷歌，欧朋

2.transition

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

3.属性：

transition-duration：过渡效果花费时间

transition-timing-function：过渡效果时间曲线

transition-delay：规定过渡效果何时开始

三.动画@keyframes

1.支持浏览器：IE10，火狐，欧朋，谷歌和Safari

2.用法

//把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}

或者用百分比

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

 3.属性：

（1）@keyframes：规定动画

（2）animation：动画属性简写，除了animation-play-state

（3）animation-name：动画名称

（4）animation-duration：动画一个周期花费时间层

（5）animation-timing-function：动画速度曲线

（6）animation-delay：动画延迟时间

（7）animation-iteration-count：播放次数

（8）animation-direction：动画是否在下一周期逆向播放

（9）animation-play-state：规定是都正在运行或暂停

（10）animation-fill-mode：规定动画时间之外的状态

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

 四.用户界面

1.resize

（1）支持浏览器：火狐，谷歌，safari

（2）

div
{
resize:both;
overflow:auto;
}

2.box-sizing

（1）支持浏览器：IE,谷歌，safari，欧朋，火狐需要前缀-moz-。

（2）作用：允许以确切方式定义适应某个区域的具体内容。

（3）

div
{
box-sizing:border-box;
-moz-box-sizing:border-box;	/* Firefox */
-webkit-box-sizing:border-box;	/* Safari */
50%;
float:left;
}

3.outline-offset

（1）除了IE都支持

（2）对轮廓进行偏移，并在超出边缘的位置绘制轮廓

（3）与边框不同之处：轮廓不占用空间；轮廓可能是非矩形。

（4）

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}