【博学谷学习记录】超强总结，用心分享| 移动web

引入字体图标样式表

调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等 
icon-xxx：图标对应的类名

 

平面转换属性：transform

位移：transform: translate(水平移动距离, 垂直移动距离);

        取值（正负均可） 

        像素单位数值

        百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧

        translate()如果只给出一个值, 表示x轴方向移动距离

       单独设置某个方向的移动距离：translateX() & translateY()

旋转：rotate

        transform: rotate(角度); 角度单位是deg

        取值正负均可 ， 取值为正, 则顺时针旋转 ， 取值为负, 则逆时针旋转。

转换原点：transform-origin

        默认圆点是盒子中心点

        transform-origin: 原点水平位置 原点垂直位置;

取值

       方位名词（left、top、right、bottom、center）  

像素单位数值 

百分比（参照盒子自身尺寸计算）

多重转换技巧

 

缩放：scale

transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧:

        一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);

scale值大于1表示放大, scale值小于1表示缩小

渐变背景

  

空间位移

语法

        transform: translate3d(x, y, z); 

        transform: translateX(值);  

        transform: translateY(值); 

        transform: translateZ(值);

        取值（正负均可）像素单位数值 百分比

透视：perspective

        属性（添加给父级）

        perspective: 值;

        取值：像素单位数值， 数值一般在800 – 1200。

空间旋转：rotate
        transform: rotateZ(值);  

        transform: rotateX(值);

        transform: rotateY(值);

        rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度

        x，y，z 取值为0-1之间的数字

立体呈现：使用transform-style: preserve-3d

实现方法 

        添加 transform-style: preserve-3d; 

        使子元素处于真正的3d空间 

        默认值flat, 表示子元素处于2D平面内呈现

呈现立体图形步骤 

        1. 盒子父元素添加transform-style: preserve-3d； 

        2. 按需求设置子盒子的位置（位移或旋转）
空间缩放：scale

语法 

        transform: scaleX(倍数);  
        transform: scaleY(倍数); 
        transform: scaleZ(倍数); 
        transform: scale3d(x, y, z);

动画：animation

定义动画

使用动画

 

动画属性

注意： 
        动画名称和动画时长必须赋值 
        取值不分先后顺序 
        如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

 

使用steps实现逐帧动画