2D转换：
translate()
rotate()
scale()
skew()
matrix()
.div{
transform:translate(100px(X坐标),100px(Y坐标));
-webkit-transform:translate(100px(X坐标),100px(Y坐标)). //safari. chrome
-ms-transform:translate(100px(X坐标),100px(Y坐标))//IE
-o-transform:translate(100px(X坐标),100px(Y坐标))//opera
-moz-transform:translate(100px(X坐标),100px(Y坐标))//firefox
transform:rotate(180deg);
transform:scale(1(宽度)，2（高度）)
transform:skew(50deg(围绕x轴旋转的度数)，50deg(围绕y轴旋转的度数))
}
3D转换：
rotateX()
rotateY()
transform:rotaeX(100deg)
///过渡
transition。 设置四个过渡属性
transition-property. 过渡的名称
transition-duration。 过渡效果花费的时间
transition-timing-function。 过渡效果的时间曲线
transition-delay. 过渡效果开始时间
trandition:width 2s,height 2s,transform 2s;
transform:rotate(360deg);
///动画
CSS3动画需要遵循@keyframes规则
规定动画的时长
规定动画的名称
animation:anim 5s;
@keyframes anim{
0%{
background:red;top:0px;
}
25%{
backgroound:blue;left:200px;top:0px;
}
50%{
background:#ccffcc;left:200px;top:200px
}
75%{
background:#00ffff;left:0;top:200px;
}
100%{
background:red;left:0px;top:0px;
}
}
@-webkit-keyframes anim{
0%{
background:red;top:0px;
}
25%{
backgroound:blue;left:200px;top:0px;
}
50%{
background:#ccffcc;left:200px;top:200px
}
75%{
background:#00ffff;left:0;top:200px;
}
100%{
background:red;left:0px;top:0px;
}
}
}
///多列
column-count:4分成四列
column-gap:30px;每一列中间间隔
column-rule:5px outset #ff0000;每列中间分隔的线的宽度及颜色
////瀑布流效果
.container{
column-width:250px;
-webkit-column-width:250px;
column-gap:5px;
-webkit-column-gap:5px;
}
.contain div{
width:250px;
margin:5px 0;
}