<返回更多

css的位移、旋转、渐变、动画

2022-06-16    金乾坤
加入收藏

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

}

}

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>