HTML5、CSS3进阶——字体图标、平面转换

1.<link rel="stylesheet" href="字体图标类">

在对应的标签直接调用iconfont 图标名

2.iconfont上传矢量图生成字体图标

（1）与设计师沟通，得到svg矢量图

（2）打开iconfont登录上传（小云彩），加入购物车，下载的时候选择添加项目

3.平面转换

目的：使用transform属性实现元素的位移、旋转、缩放等效果

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

2D转换

（1）位移：

+x右-x左-y上+y下

transform：translate（水平移动距离，垂直移动距离）

只给一个值表示水平方向移动距离；单独设置某个方向的移动距离translateX/Y。

谁变谁设置：transiton：all 0.5s//移动的元素和移动速度

像素单位数值或百分比（参考盒子子级自身的尺寸）

在一定情况下用translate快速实现绝对定位的居中，能有效避免开发维护。使用left和right各加50%再使用margin-left和margin-top来移动的话加的是数字+px有局限性，transform：translate（-50%，-50%）能更高效。

（2）通过位移的方法实现双开门：

关键代码：

    <div class="box">

    </div>
//body里面放一个div标签
        * {
            margin: 0;
            padding: 0;
        }
//清除默认样式表        
        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            overflow: hidden;
        }
//设置盒子的尺寸，背景图，overflow用来用来隐藏盒子溢出部分        
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all 0.5s;
        }
//设置两个为元素标签设置尺寸和背景图，过渡的时间，谁变加给谁
        .box::after {
            background-position: right 0;
        }
//右边的伪标签显示一张图片的右半部分
        /* 鼠标移入的时候的位置改变的效果 */
        .box:hover::before {
            transform: translate(-100%);
        }
哪个变哪个就加hover
        .box:hover::after {
            transform: translateX(100%);
        }

注意事项：可以直接用三个div加浮动的方式来实现，用伪类标签更快，想让谁hover就E：hover之后再找子级谁要变化，一层一层找到子级，伪类元素的content ' ' 必须要加,before和after创建出来的都是行内标签使用定位、display、或浮动让其显示。

（3）旋转：

正顺负逆

围绕几何图形的中心旋转：

用rotate实现元素的旋转效果；transform：rotate（角度）单位是deg。旋转的时候必须加过渡transition：all ?s; 属性实现旋转的过程，不然浏览器显示不了动态旋转。

固定原点旋转：

使用transform-origin属性改变转换的原点，是一个复合属性：原点的水平位置 原点的垂直位置

取值：方位名词：right bottom或者其他center

（4）多重转换：

transform：translate（） rotate（）；//边走边转，不能先旋转再位移

原因：在旋转的过程中坐标轴的方向会发生改变，这样就导致位移的方向发生了改变。

注意：多重转换的时候必须要复合写，不能分开写，css有层叠性，会将上面的transform给覆盖了。

（5）图片的缩放：

transform：scale（x轴缩放的倍数，y轴缩放的倍数），一般情况下transform：scale（缩放的倍数）

注：直接从中心点出发的缩放，基础班学的将width：150%没有将图片从中心点放大。

opacity：0~1；设置透明度

注：使用transform时必须时刻注意其复合属性，避免被层叠影响。