iconfont,平面转换和2d转换

113 阅读1分钟

iconfont/平面转换

以字体形式存在于浏览器中

iconfont的使用方法

------link引用iconfont.css文件-----

1.&xx;

在body内容处写入字符实体

style 写入font-family

2.写入类名

写入类名iconfont 和 icon-(你想写的图标名字)

ps:想改变属性需要再写入一个新的类名

3.伪元素写法

伪元素content内填入\ (用于反编译)和字符实体的最后4位**(不包括;)**

SVG矢量图上传

点开iconfont,点云,拖文件进入云,再进行下载

SVG格式矢量图,可以上传至iconfont

平面转换

2d转换

transform:translate(X,X)平面移动

transform会增大盒子层级,对行内元素不管用

transform:rotate (Xdeg)旋转

transform-origin:+方位名词(例如left bottom左下)

或者方位坐标,以目标左上为原点

写在目标中,而不是hover中!!

transform 复合属性

要先写平移再写旋转,因为旋转会改变坐标轴的方向。

transform:scale放大缩小

改变盒子在平面内的形态(位移,旋转,缩放)