過渡屬性
過渡：由一種狀態(tài) 漸漸的 過渡到另一種狀態(tài)
transition:過渡屬性 持續(xù)時間 延遲 運(yùn)動曲線;
transition：all 1s;
all:所有的屬性都發(fā)生過渡
transition-property:過渡的屬性 all width
transition-duration:持續(xù)時間 1s
transition-delay: 過渡延遲執(zhí)行1s;
transition-timing-function:運(yùn)動曲線
linear 線性勻速
ease-in-out 先加速 后減速
transition-delay: 延遲執(zhí)行
線性漸變（background-image）
background-image: linear-gradient(135deg,yellow,green);
linear-gradient(方向惫东，起始顏色，終止顏色);
方向：to left to right to top to bottom 角度 30deg
起始顏色
終止顏色
徑向漸變（background-image）
background-image: radial-gradient(at left top,yellow,green);
radial-gradient(輻射半徑,中心點(diǎn)位置代兵，起始顏色傅是，終止顏色);
中心點(diǎn)位置：
at center left top right bottom
at 50px 50px
輻射半徑：
50px
50px 100px
2D轉(zhuǎn)換
如果多個屬性發(fā)生過渡，多個屬性連寫幅慌，之間使用空格隔開
transform:translate(-200px,200px) rotate(45deg);
- 1芦倒、縮放 scale
transform: scale(2,0.5);
transform: scale(水平縮放比例，垂直縮放比例);
如果只有一個值赴叹，等比例縮放
不能使用百分比
大于1放大鸿染，小于1縮小
- 2、變換位移 translate
transform:translate(-50%,-50%);
transform: translate(-100px,-100px);
transform: translate(水平位移乞巧，垂直位移）涨椒；
如果只有一個值，只會水平方向發(fā)生位移
可以使用百分比，相對于盒子自身而言的
正值 向下向右 負(fù)值 向上向左
- 3丢烘、旋轉(zhuǎn) rotate
transform:rotate(-45deg);
角度 deg
正值 順時針
負(fù)值 逆時針
- 3柱宦、扭曲 skew
transform:skew(30deg,0deg);
skew(水平角度，垂直的角度)
規(guī)律： 當(dāng)前方向設(shè)置了扭曲的角度后播瞳，當(dāng)前這把條邊的角度不變掸刊，另一條邊會產(chǎn)生要給夾角
- 4、設(shè)置變換中心
transform-origin:left; /*變換中心*/
取值：left top center right bottom 50px 50px赢乓；
