1-平面位移

transform: translate(100%);

正值往右,負值往左

2-平面旋轉

transform: rotate(360deg);

順時針旋轉

旋轉原點轉換

transform-origin: right bottom;

除方位名詞外還可以加具體數值.

3-漸變

background: linear-gradient( pink,green);

默認漸變方向是從上到下

可以通過方位名詞改變漸變方向

4-空間轉換

簡寫

transform: translate3d(100px, 100px, 200px);

分寫

transform: translateX(100px)

transform: translateY(100px)

transform: translateZ(100px)

5-空間旋轉

transform: translateX(360deg)

transform: translateY(360deg)

transform: translateZ(360deg)

6-空間縮放

transform: scale3d(1,1,1);

7-動畫

實現動畫

animation: jin 4s linear 0s infinite alternate;

定義動畫

@keyframes jin {

from{

width: 300p

}

to {

width: 900p

}

}