【无标题】字体图标和2D转换

字体图标

引入字体图标用link引入iconfont.css

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

1.使用类名引入字体图标

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

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

• 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。
• 第二个类名 icon-daohangdizhi， 告诉盒子到底使用哪个小图标。

2.使用unicode编码

也可以直接在标签内部放入一个编码

html标签

 <strong> &#xe8ab; </strong>  

css 要指定当前标签的文字是字体图标，必须要声明。

 strong {
      font-family: 'iconfont';
}

3.使用伪元素字体图标

<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";
}

变形transform

1.位移translate

translate可以让盒子沿着x轴或用轴来移动

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

translate和margin的区别:

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

​ 位移translate移动盒子不会影响其他盒子.不脱标

移动的数值如果是百分比,移动的是盒子自身的宽度

2.盒子水平垂直居中

.inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      transform: translate(-50%, -50%);
    }

    /* .inner {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    } */

3.旋转rotate

旋转可以让盒子旋转角度

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

如果是正数,就是顺时针旋转

如果是负数,就是逆时针旋转

4.设置中心店 transform-origin

设置旋转的中心位置

  transform-origin: right bottom;

5.缩放

transform: scale(1.5)；

6.倾斜

transform: skew(60deg)；