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;
}