字体图标

• 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);