一.transform:
1.translate(2D 移动):
transform:translateX(x);像X轴方向移动
transform:translateY(y);像X轴方向移动
transform:translate(x,y);
2.scale(2D 缩放):
transform:scale(x);x<1 时,缩小,x>1时,放大
3.ratate(旋转):
transform:retateX(度数);
4.transform origin(旋转中心点):
transform origin:left top 旋转中心点在左上角
5.skewX(角度)倾斜角度:
transform:skewX(角度);
6.perspective(透视)在body里面设置:
body{
perspective:1000px
}
结合旋转使用:
transform:retate3d(x,y,z,度数);3d旋转
二.transition(过渡效果):
transition:all 0.5s linear
三.自定义创建动画(可以实现轮播图):
@keyframes moving{
from{ transformX(0)}
to{transformX(-900px)}
}
ul{
animation:moving 5s linear infinite;
}