字体图标和2D转换

字体图标

1:引入相关文件

1.1复制相关的文件，到 fonts文件夹里面。

1.2引入css

<link rel="stylesheet" href="./fonts/iconfont.css">

使用类名引入字体图标(大多数使用)

<span class="iconfont icon-daohangdizhi"></span>

• 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。

• 第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。

使用伪元素字体图标

<div class="car1">购物车</div>

.car {
      width: 200px;
      height: 45px;
      border: 1px solid pink;
      text-align: center;
      line-height: 45px;
      font-family: 'iconfont';
    }
.car::before {
    content: "\e63b";

}
.car::after {
    content: "\e686";
}

这样结构比较清晰,省了很多小盒子

注意： 使用伪元素字体图标，一定要声明字体。 font-family: "iconfont"

总结:

字体图标是前端工程师必须具备的知识点。 开发中， 字体图标上传，选择，都是网页美工给我们准备好了。

我们重点是下载和使用。

字体图标使用可以整体分为两大步骤：

1. 引用线上地址即可。(地址前面一定要带http://)

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">

调用。

• 开发中最常用的是使用类名来调用，所以重点记住这个就可以了。

• <span class="iconfont icon-daohangdizhi"></span>

 2D转换transform(变形)

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

位移 translate

translate可以让盒子沿着x轴或者y轴来移动。

语法：

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

问题：

1. 他和margin有啥区别。

   • margin移动盒子会影响其余的盒子。把其他人挤走。

   • 位移translate移动盒子不会影响其他的盒子。不脱标。

   • 位移经常需要的场景：

     • 比如 盒子上下移动不影响其他盒子

     • 盒子水平和垂直居中，写法简单

     • 轮播图的动画效果

注意：

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

 transform: translateX(100%);

旋转 rotate 定位deg盒turn

旋转可以让盒子旋转角度。

语法：

transform: rotate(45deg);    一定写单位

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

设置中心点 transform-origin

/* 设置旋转的中心点位置 */

transform-origin: right bottom;

多形态变形小技巧

1. 如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。

 transform: translate(-50%, -50%) rotate(360deg);

注意，多个值之前用 空格隔开。

缩放 scale

语法：

transform: scale(1.2)；

它比这宽度和高度最大的优势： 他是用中心点来进行缩放的，同样他不会影响其他的盒子。

skew倾斜

/*第一个值代表水平倾斜   第二个值代表垂直倾斜*/