平面变化
字体图标
iconfront
Fontawesome
……
位移
语法
transform:translate(水平移动距离,垂直移动距离);取值
- 像素单位数值
- 百分比(参照物为盒子自身尺寸)
技巧
注意
translate()如果只给出一个值，表示x轴方向移动距离
提示
单独设置某个方向的移动距离:translateX()/translateY() 加入transition:all，动画过渡更加丝滑
旋转
平面旋转
语法
transform：rotate(角度deg);取值
取值为正，则顺时针旋转 取值为负，则逆时针旋转
转换原点
语法
transform-origin:原点水平位置,原点垂直位置;取值
- 方位名词(left、top、right、bottom、center)
- 像素单位数值
- 百分比(参照盒子自身尺寸计算)
多重转换
语法
transform:translate() rotate();缩放
transform:scale(x轴缩放倍数,y轴缩放倍数);渐变
background-image:linear-gradient(颜色1 位置,颜色2 位置2);