2015.12.1CSS3转换、过渡、动画效果及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;
}