移动web-字体图标/transform/渐变

字体图标

注意点

• 字体图标展示的是图标，本质是字体。
• 阿里巴巴矢量库 Iconfont：www.iconfont.cn/
• 引入样式表：iconfont.css 复制粘贴图标对应的Unicode编码
• 调用2个类名 iconfont icon-xxx

平面转换

平面位移translate

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

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

使用translate快速实现绝对定位的元素居中效果

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

旋转rotate

属性

transform: rotate(角度);取值为正, 则顺时针旋转 取值为负, 则逆时针旋转

转换原点

transform-origin: 原点水平位置 原点垂直位置 默认圆点是盒子中心点

取值方位名词（left、top、right、bottom、center）像素距离

多重转换

连写 空格隔开

先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放scale

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

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

空间转换

属性

transform: translate3d(x, y, z);

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

透视效果

perspective:400~1200;

添加给父级

空间旋转

属性

transform: rotateZ(角度deg); transform: rotateX(角度deg); transform: rotateY(角度deg);

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

空间坐标系

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

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

立体呈现

transform-style: preserve-3d; 子元素处于真正的3d空间 使后面被遮住的元素可见

渐变背景

background-image: linear-gradient( 颜色1，颜色2 );