移动web：字体图标、平面转换、渐变字体图标平面转换渐变移动布局 web 矢量图阿里巴巴矢量图等比缩放旋转原

字体图标

阿里巴巴矢量图库:https://www.iconfont.cn/
<!-- 
如果使用的是阿里巴巴矢量图里的路径，则直接复制路径（前面添加https:协议）
-->
`<link rel="stylesheet" href="./iconfont/iconfont.css">
  <style>
 <!-- 修改矢量图大小以及粗细等需要权重到iconfont以上 -->
    .iconfont {
    }
  </style>
  
  <body>
  <!--一般使用i标签或者em标签-->
  <!-- 
        font class使用
        设置字体图标公共类名iconfont 
        打开demo_index.html
        点击Font Class选项卡
        复制图标的类名icon-xxx 添加到标签的class上
        使用font class的方法
        优点：解决Unicode的缺点，语义明确，
    -->
  <i class="iconfont icon-xxx"></i>
  
  <!-- 
        Unicode使用
        设置字体图标公共类名iconfont 
        打开demo_index.html
        复制图标的类名&#xxx 添加到标签里面
        使用Unicode方法
        缺点：书写不直观，语义不明确，看代码没办法确定是什么
    -->
  <i class="iconfont">&#x33;</i>
</body>`

<!-- 
        symbol使用
        支持多色图标了，不再受单色限制。
        兼容性较差，支持 ie9+,及现代浏览器。
 -->
第一步：拷贝项目下面生成的symbol代码：
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步：加入通用css代码（引入一次就行）：
<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面：
<body>
<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>
</body>

平面转换

<!--平面位移:可单个属性，单位是像素px或者百分比-->
transform: translate(X轴向右为正,Y轴向下为正 );

<!--绝对定位的盒子居中-->
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

<!--旋转、转换  deg代表度数-->
transform: rotateX（XXdeg）；居于X轴旋转
transform: rotateY（XXdeg）；居于Y轴旋转
transform: rotateZ（XXdeg）；居于z轴旋转(默认选择方式)

<!--转换原点-->
transform-origin: 方位名词（连接不带空格）;
transform-origin: right top；
或
transform-origin: XXpx XXpx；（x、y轴的位置向右和向下为正）

渐变

<!--方向表达的是是渐变色往哪个方向去-->
<!--使用方位名词的写法，没有办法通过页面调试工具进行调试 -->
从左上角开始往右下角渐变
  background-image: linear-gradient(to right bottom, #050, #0b0, #0f0); 
<!--使用度数的方法，能够进入谷歌页面检查进行调试 -->
左下角开始向45度方向（右上角）变化
  background-image: linear-gradient(45deg, #050, #0b0, #0f0);
 <!--白光闪过的方法 -->
盒子倾斜
  transform: skewX(XXdeg);
  transform: skewY(XXdeg);
中间使用白色，两边没有颜色，可以实现一条亮白光
  background-image: linear-gradient(transparent, #0b0, transparent);