CSS3转换、过渡、动画效果及css盒子模型
css3转换
1.元素偏移 tranlate
通过translate（）的方法元素从当前位置移动到给定的left（x坐标）和top（y坐标）位置参数。
代码如下：
div{
transform：translate（50px，100px）；
-ms-transform：translate（50px，100px）； /*IE9*/
-webkit-transform：translate（50px，100px）； /*谷歌苹果*/
-o-transform：translate（50px，100px）； /*open*/
-moz-transform:translate(50px,100px)； /*火狐*/
}
2.旋转角度 rotate
通过rotate（）方法可以使元素顺时针旋转给定的角度，允许负值。
代码如下：
div{
transform：rotate（30deg）；
-ms-transform：rotate（30deg）； /*IE9*/
-webkit-transform：rotate（30deg）； /*谷歌苹果*/
-o-transform：rotate（30deg）； /*open*/
-moz-transform：rotate（30deg）；
}
3.元素尺寸加大或者减少 scale
代码如下：
div{
transform：scale（2,4）
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
4.翻转 skew
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
代码如下：
div{
transform：skew（30deg,20deg）；
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
css3 3D转换
rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
实例
div{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
实例
div{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
css3过渡效果
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
div{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover{
width:300px;
}CSS3动画效果
div捆绑动画名，@keyframes 动画名
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
1.规定动画的名称
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{
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;}
}
css盒子模型
术语翻译
element : 元素
padding : 内边距
padding 属性接受长度值或百分比值，但不允许使用负值。
border : 边框
margin : 外边距
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
css定位
相对定位
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，
它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
div{
position: relative;
left: 30px;
top: 20px;
}
绝对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，
相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
div{
position: absolute;
left: 30px;
top: 20px;
}
固定定位
元素不会因为页面的滑动而滑动
div{
position:fixed;
left:5px;
top:5px;
}
