10.1 2D位移
属性名：transform
属性值：translateX 水平方向的位移 相对于自身位置移动
translateY 垂直方向的位移 相对于自身位置移动
transform：translate(x,y);
位移和定位搭配使用： position:absolute; top:50%; left:50%; transform：translate(-50%,-50%);
10.2 2D缩放(面试题)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 1px;
transform: scale(0.1);
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>10.3 2D旋转
transform:rotate(60deg);
正值-顺时针，负值-逆时针
10.4 图标的引用
参考阿里巴巴图标库
10.5 精灵图（雪碧图）
图片整合技术
优点：
1、将多个图片整合成为一张图，浏览器只需要发送一次请求，就可以同时加载多个图片提高访问效率，提高用户的体验度
2、将多个图片整合成一张图，减少了图片的总大小
精灵图使用步骤：
1、确定要使用的精灵图
2、测量每个图片的大小以及图片所在的位置
3、将精灵图设置为背景图片
4、使用背景图位置属性展示每个精灵图
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.box {
width: 300px;
height: 250px;
margin: 100px auto;
background-color: rgb(241, 238, 238);
}
.wz{
float: left;
width: 70px;
height: 20px;
margin-top: 15px;
margin-left: 22px;
color: rgb(100, 100, 100);
}
ul{
float: left;
width: 240px;
height: 180px;
margin-left: 30px;
/* background-color: red; */
}
li{
float: left;
width: 80px;
height: 90px;
/* background-color: skyblue; */
}
li:first-child{
background-image: url(images/ToolsIcon.png);
background-repeat: no-repeat;
background-position: 27px 28px;
}
li:nth-child(2){
background-image: url(images/ToolsIcon.png);
background-repeat: no-repeat;
background-position: 27px -41px;
}
li:nth-child(3){
background-image: url(images/ToolsIcon.png);
background-repeat: no-repeat;
background-position: 27px -111px;
}
li:nth-child(4){
background-image: url(images/ToolsIcon.png);
background-repeat: no-repeat;
background-position: 27px -182px;
}
li:nth-child(5){
background-image: url(images/ToolsIcon.png);
background-repeat: no-repeat;
background-position: 27px -252px;
}
li:nth-child(6){
background-image: url(images/ToolsIcon.png);
background-repeat: no-repeat;
background-position: 27px -321px;
}
p{
float: left;
width: 70px;
height: 15px;
margin-top: 60px;
margin-left: 8px;
color: gray;
}
p:hover{
color: red;
}
</style>
</head>
<body>
<div class="box">
<p class="wz">职场取经</p>
<ul>
<li><p>求职技巧</p></li>
<li><p>行业薪资</p></li>
<li><p>简历模板</p></li>
<li><p>就业指导</p></li>
<li><p>实习兼职</p></li>
<li><p>沟通技巧</p></li>
</ul>
</div>
</body>
</html> 
