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

}

}