1.css过渡
语法:
div {
transition: <property> <duration> <timing-function> <delay>;
}
transition 是 transition-property, transition-duration,transition- timing-function ,transition-delay的速写形式,分别表示过渡属性,持续时间,时间曲线,过渡延迟
过渡与动画的区别:
过渡需要触发
不是所有的属性都能过渡
2.css变形
语法:
div {
transform: xxx();
transform-origin:center;
}
属性:
transform 用来指定一个变形函数对元素执行变形操作
旋转:
rotateX (angle) 绕X轴旋转,例如单杠运动 30deg
rotateY (angle) 绕Y轴旋转,例如钢管舞运动
rotateZ (angle) 绕Z轴旋转,例如旋转盘。
rotate (angle) 与rotateZ()一致。
倾斜:
skew(X,Y)
skewX(deg) 表示水平方向的扭转
skewY(deg) 表示垂直方向的扭转
缩放:
scale() 函数能够更改元素的大小,scale变换的是通过矢量来实现,它的坐标定义了每个方向上的缩放比例。如果两个向量的坐标是相等的,缩放是均匀的
scale(x,y)
移动:
translate(xpx, ypx) 函数能够移动元素。x为元素在水平方向上移动的距离,y为元素在垂直方向上移动的距离。