CSS Day10

10.1 2D位移

属性名：transform

属性值：translateX 水平方向的位移 相对于自身位置移动

translateY 垂直方向的位移 相对于自身位置移动

transform：translate(x,y);

位移和定位搭配使用：
position:absolute;
top:50%;
left:50%;
transform：translate(-50%,-50%);

10.2 2D缩放(面试题)

10.3 2D旋转

transform:rotate(60deg);

正值-顺时针，负值-逆时针

10.4 图标的引用

参考阿里巴巴图标库

10.5 精灵图（雪碧图）

图片整合技术

• 优点：

  1、将多个图片整合成为一张图，浏览器只需要发送一次请求，就可以同时加载多个图片提高访问效率，提高用户的体验度

  2、将多个图片整合成一张图，减少了图片的总大小

• 精灵图使用步骤：

  1、确定要使用的精灵图

  2、测量每个图片的大小以及图片所在的位置

  3、将精灵图设置为背景图片

  4、使用背景图位置属性展示每个精灵图

案例

​

    
    
    
    

​

    

        
职场取经
        

            
求职技巧
            
行业薪资
            
简历模板
            
就业指导
            
实习兼职
            
沟通技巧
        
    

​