css3包括兩種轉換，2d轉換和3d轉換。
css3的轉換允許我們對元素進行旋轉、縮放、移動或傾斜。
不管2d轉換還是3d轉換都是操作的同乙個的屬性：transform
有四種轉換：rotate、scale、translate、skew
1.1.1 translate
在x和y方向平移元素:
transform: translate(500px, 0px);
說明：引數可以是畫素或百分比。
引數1：沿x方向的平移，正表示向右移動
引數2：沿y方向的平移，正表示向下移動
如果是百分比是相對於自己的寬高的百分比。
如果僅僅沿x或y某乙個方向運動，也可以使用：
transform:translatex(200px); 或 transform:translatey(200px);
1.1.2 rotate
旋轉元素， 是指有沿著 z 軸旋轉。(就是垂直於螢幕的軸）
transform:rotate(10deg);
引數必須是度數。大於0表示順時針旋轉的度數，小於0表示逆時針旋轉的角度。
說明:旋轉的時候預設是以元素的幾何中心作為軸來旋轉的。
可以使用 transform-origin: offsetx offsety;來設定旋轉的時候的軸的位置.
1.1.3 scale
對元素進行放大。
transform: scale(倍數);
1.1.4 skew
skew是傾斜（斜切）。讓元素與x方向或y方向產生傾斜。
transform: skew(40deg,10deg);
引數1：x方向的傾斜度數
引數2：y方向的傾斜度數
想對2d轉換來說，3d轉換瀏覽器支援的不太好。不過在移動端可以放心的使用。
3d座標系：
預設情況水平向右為x軸正方形、垂直向下為y軸正方形、垂直於螢幕向外的為z軸正方形
1.2.1 perspective屬性
perspective（透視）是transform變形3d中最重要的內容。如果不設定透視，元素的3d變形效果將無法實現，所有的變化都會被投影到2d的區域展示。
可以簡單理解為 視距，用來設定使用者和元素 3d 空間 z 平面之間的距離。而其效應由他的值來決定，值越小，使用者與 3d 空間 z 平面距離越近，視覺效果更令人印象深刻；反之，值越大，使用者與3d空間z平面距離越遠，視覺效果就越小。
要把它用在父容器中。
1.2.2 translate3d(x,y,z)
translate3d(x,y,z) 可以在x,y,z三個方向移動。
translatez(z) 只在z軸平移
1.2.3 rotate3d(x, y, z, a)
3d旋轉。 分別表示繞著x，y，z旋轉。 引數中的x，y，z是乙個數值。a是乙個角度。
如果a是正值表示順時針旋轉， 如果a是負值表示逆時針旋轉。
x,y,z表示方向向量，xyz的平方和如果是1的話就是標準向量，如果不是1就會轉換成乙個標準向量。x,y,z分別分別除以他們的平方和得到的值就是標準向量。 這三個值決定了將來要旋轉的時候的座標軸。
可以使用rotatex、rotatey、rotatez表示沿著某個軸的旋轉
rotatex(40deg) 等同於 rotate3d(1,0,0,40deg)
1.2.4 scale3d(sx, sy, sz)
引數分別表示沿著向相應的座標軸的縮放。注意sz其實是縮放的translatez的值，如果沒有設定translatez則sz的值無效的。
scalex、scaley、scalez分別表示x，y，z方向的縮放。
1.2.5 transform-style
表示他的子元素在變形的時候，是在乙個2d平面內變形，還是在乙個3d平面內變形。
兩個值：flat和preserve-3d
flat：變形仍然在2d空間
preserve-3d：3d空間內變形
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
>
div.container
.container div
.font
.back
.left
.right
.up.down
@keyframes my_rotateto}
style
>
head
>
>
class
="container"
>
class
="font"
>
前div
>
class
="back"
>
後div
>
class
="left"
>
左div
>
class
="right"
>
右div
>
class
="up"
>
上div
>
class
="down"
>
下div
>
div>
body
>
html
>
transition-property, transition-duration, transition-timing-function, transition-delay
不同的狀態可以通過偽類像:hover、:active來定義。也可以通過js**來動態的改變。
lang
="en"
>
>
charset
="utf-8"
>
>
過渡title
>
>
.box
.box:hover
style
>
head
>
>
class
="box"
>
div>
body
>
html
>
transition: width 2s linear 1s, height 3s linear 2s;
過渡屬性和過渡週期不能省略。
延遲時間如果不設定預設是 0s
過渡函式主要有以下幾個值：
如果不設定預設是：ease
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;
我們在使用 transition實現動畫的時候只能指定要改變的屬性的開始值和結束值，然後在這兩個值之間進行平滑過渡的方式來實現動畫效果，因此不能實現比較複雜的動畫效果
而animation通過定義多個關鍵幀( keyframes )以及定義每個關鍵幀中元素的屬性值來實現更為複雜的動畫效果。
下面的**列出了 @keyframes 規則和所有動畫屬性：
CSS相關知識
css cascading style sheets的縮寫 翻譯為 層疊樣式表 或者 級聯樣式表 簡稱樣式表。作用 它主要是用來給html網頁來設定外觀或者樣式。css 規則由兩個主要的部分構成 選擇器，以及一條或多條宣告。選擇器通常是您需要改變樣式的 html 元素。每條宣告由乙個屬性和乙個值組成...
css3動畫相關
相容性寫法為 transform origin x y z x,y,z可以是百分比和畫素 webkit transform origin x y z chrome safari moz transform origin x y z firefox o transform origin x y z o...
css 3d 動畫 相關
transform style preserve 3d 設定3d模式perspective 700px 屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身perspect...