一、转换transform
transform字面上就是变形,转换的意思,在CSS3中转换主要包括移动、旋转、缩放和扭曲。
(1)移动translate()
translate(x,y)
translateX(X)
translateY(Y)
(2)旋转rotate()
正数表示顺时针旋转,负数则表示逆时针旋转
(3)缩放scale()
scale(x,y)
scaleX(X)
scaleY(Y)
(4)扭曲skew()
skew(x,y)
skewX(X)
skewY(Y)
(5)矩阵matrix()
将上述所有的2D转换方法组合在一起,需要6个参数,包含数学函数、允许旋转、缩放、移动、镜像以及倾斜元素,相当于直接应用一个变换矩阵。
transform:matrix(0.866,0.5,-0.5,0.866,0,0)
二、过渡transition
transition:property duration timing-function delay(分别代表设置过渡效果的css属性名称、 过渡效果时间、速度曲线和开启时间)
三、动画animation
动画animation类似于transition,它们都是随着时间改变元素的属性值。它们的主要区别就是transition需要触发一个事件(hover或者click等)才会随着时间改变其css属性,但是animation则不需要触发任何事件即可显式地随着时间改变其css属性,从而实现一种动画效果
animation:name duration timing-function delay iteration-count direction(分别代表 需要绑定到选择器的keyframe名称、动画完成所需时间、速度曲线和动画开启前的延迟、播放次数以及是否轮流反向播放动画)