1.過渡
屬性介紹：
//過渡屬性
1. transition-property:width膝捞，height,(all)
2. transition-duration:2s //過渡時(shí)間
3. transition-delay :1s,2s;//延時(shí)時(shí)間
---------------------------------------------------
4. transition-timing-function：//
linear 規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）旅东。
ease 規(guī)定慢速開始嘴办，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）野瘦。
ease-in 規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）飒泻。
ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）鞭光。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中定義自己的值∨⒁牛可能的值是 0 至 1 之間的數(shù)值惰许。
聯(lián)寫方式：
transition: property duration timing-function delay;
或者:transition: property duration delay timing-function ;
2.圓角屬性（border-radius）：
演示代碼：
li{
width: 200px;
height: 40px;
border: 1px solid gray;
background-color: skyblue;
margin: 10px 0;
}
li:nth-child(1){
/* 一次設(shè)置 全部生效 */
border-radius: 10px;
}
li:nth-child(2){
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}
li:nth-child(3){
/* 如果設(shè)置了兩個(gè) 第一個(gè)對(duì)應(yīng)到 左上 右下 第二個(gè)對(duì)應(yīng) 右上 左下 */
border-radius: 10px 50px;
}
li:nth-child(4){
/* 如果設(shè)置了三個(gè) 第一個(gè)對(duì)應(yīng)到 左上 第二個(gè)對(duì)應(yīng) 右上 左下 第三個(gè)對(duì)應(yīng)到 右下 */
border-radius: 10px 50px 90px;
}
li:nth-child(5){
/* 如果設(shè)置了是個(gè) 從 左上 右上 右下 左下 */
border-radius: 10px 20px 30px 40px;
}
li:nth-child(6):hover{
border-radius: 10px 50px;
transition: all 1s;
}
設(shè)置值得單位：可是使用em,%進(jìn)行設(shè)置，如果設(shè)置成為50%就是圓角
3. 2D史辙，或3D 變換(transform)
相關(guān)屬性：
//移動(dòng)
translate(x,y) |定義 2D 轉(zhuǎn)換汹买。
translate3d(x,y,z) |定義 3D 。
translateX(x) |定義轉(zhuǎn)換聊倔，只是用 X 軸的值晦毙。
translateY(y) |定義轉(zhuǎn)換，只是用 Y 軸的值耙蔑。
translateZ(z) |定義 3D 轉(zhuǎn)換见妒，只是用 Z 軸的值。
//縮放
scale(x,y) | 定義 2D 縮放轉(zhuǎn)換纵潦。
scale3d(x,y,z) |定義 3D 縮放轉(zhuǎn)換徐鹤。
scaleX(x) |通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換垃环。
scaleY(y) |通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。
scaleZ(z) |通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換返敬。
//旋轉(zhuǎn)
rotate(angle) |定義 2D 旋轉(zhuǎn)遂庄，在參數(shù)中規(guī)定角度。
rotate3d(x,y,z,angle) |定義 3D 旋轉(zhuǎn)劲赠。
rotateX(angle) |定義沿著 X 軸的 3D 旋轉(zhuǎn)涛目。
rotateY(angle) |定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) |定義沿著 Z 軸的 3D 旋轉(zhuǎn)凛澎。
//傾斜
skew(x-angle,y-angle) |定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換霹肝。
skewX(angle) |定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。
skewY(angle) |定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換塑煎。
perspective(n) |為 3D 轉(zhuǎn)換元素定義透視視圖沫换。
注意: 使用單位： 角度單位（deg）,距離單位（px）
（1）設(shè)置變換參考點(diǎn)（transform-origin）：
transform-origin: x-axis y-axis z-axis;
x-axis 定義視圖被置于 X 軸的何處∽钐可能的值：
left
center
right
length
%
y-axis 定義視圖被置于 Y 軸的何處讯赏。可能的值：
top
center
bottom
length
%
z-axis 定義視圖被置于 Z 軸的何處冷尉∈妫可能的值：
length
案例：
.pkSingle{
display: block;
width: 100px;
height: 150px;
margin: 20px auto;
/* 添加過渡屬性 */
transition: all 1s;
/* 設(shè)置 變換的 參照點(diǎn) */
transform-origin: bottom right;
額外內(nèi)容：
（3）backface-visibility： 定義元素在不面對(duì)屏幕時(shí)是否可見。
**語法**
backface-visibility: visible|hidden;值
visible 背面是可見的雀哨。
hidden 背面是不可見的磕谅。
注意:過渡無法使用在漸變的顏色上
