本文通过任务描述、任务实施、实验实训三部分，深入浅出地介绍了如何运用CSS3的平移、旋转、缩放、倾斜等转换属性，为DH商城的导航链接添加生动的动画效果。
任务描述
简要介绍项目背景，明确学习目标。阐述DH商城导航栏的设计需求，包括期望达到的动画效果及其在用户体验上的重要性。
对DH商城导航链接做平移、旋转、缩放、倾斜等变化
知识回顾
CSS3转换是一些效果的集合，如平移、旋转、缩放、倾斜效果。每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。
语法
transform:[transform-function] *;
其中transform-function是转换的的效果，同时可以使用多个效果进行组合，之间使用空格分隔。
常用转换效果
| 效果 | 说明 |
| translate() | 平移函数，基于X、Y坐标重新定位元素的位置 |
| scale() | 缩放函数，可以使任意元素对象尺寸发生变化 |
| rotate() | 旋转函数，取值是一个度数值 |
| skew() | 倾斜函数，取值是一个度数值 |
| matrix() | 把所有 2D 转换方法组合在一起 |
每一种效果又包含分别基于X、Y坐标的效果，如scaleX()、scaleY()
对转换的讲解将使用以下基础代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css动画效果基础案例</title>
<style>
li{
list-style: none;
float: left;
width: 80px;
line-height: 40px;
background: rgba(242, 123, 5, 0.61);
border-radius: 6px;
font-size: 16px;
margin-left: 3px;
}
li a{
text-decoration: none;
color: #fff;
display: block;
text-align: center;
height: 40px;
}
li a:hover{
background: rgba(242, 88, 6, 0.87);
border-radius: 6px;
}
li a:hover{
transform: translate(4px,8px);
-webkit-transform: translate(4px,8px);
-o-transform: translate(4px,8px);
-moz-transform: translate(4px,8px);
}
</style>
</head>
<body>
<h1>欢迎来到DH商城</h1>
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">美妆馆</a></li>
<li><a href="#">超市</a></li>
<li><a href="#">全球购</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">金融</a></li>
</ul>
</body>
</html>
任务实施
位移变换效果实现
以元素的左上角为坐标点，进行平移
语法
translate(tx,ty);/*向两个方向平移*/
translateX(tx);/*水平方向平移*/
translateY(ty);/*垂直方向平移*/
其中：
- tx：水平方向的平移量，正数为向右平移。
- ty：垂直方向的平移量，正数为向下平移。
示例
li a:hover{
transform: translate(4px,8px);
-webkit-transform: translate(4px,8px);
-o-transform: translate(4px,8px);
-moz-transform: translate(4px,8px);
}
旋转效果实现
以元素的中心为坐标进行旋转
语法
rotate(a);/*水平面旋转*/
rotateX(a);/*环绕X坐标旋转*/
rotateY(a);/*环绕Y坐标旋转*/
其中：
a：旋转的角度，单位为deg，正数为顺时针旋转
示例
li a:hover{
transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg) ;
-o-transform: rotate(-70deg);
}
缩放效果实现
以元素的中心为坐标，实现水平和垂直方向缩放
语法
scale(sx,sy);/*水平、垂直方向缩放*/
scaleX(sx);/*水平方向缩放*/
scaleY(sy);/*垂直方向绽放*/
其中：
1、sx：水平方向放大的倍数，正数为放大
2、sy：垂直方向放大的倍数，正数为放大
示例
li a:hover{
transform: scale(1.5);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
}
倾斜效果实现
倾斜的坐标系和数学中的坐标系完全不一样。倾斜以元素的左上角为原点，竖直向下为x方向，水平向右为y方向，
语法
skew(sx,sy);/*两个方向分别相对X、Y坐标倾斜*/
skewX(sx);/* 垂直方向相对X坐标倾斜*/
skewY(sy);/*水平方向相对Y坐标倾斜*/
其中
- sx：垂直方向倾斜的角度，单位deg，正数向右偏移，即逆时针方向偏移
- sy：水平方向倾斜的角度，单位deg，正数向下偏移，即顺时针方向偏移
示例
li a:hover{
transform: skewX(40deg);
-webkit-transform: skewX(40deg);
-moz-transform: skewX(40deg);
-o-transform: skewX(40deg);
}
实验实训
实验一：图片墙效果
1、在项目中创建网页pic-wall.html
2、多张图片在网页中随机放置（使用偏移实现）。图片随机旋转和倾斜。
3、当鼠标悬浮时，图片显示在最上层（z-index），放大1.5倍。不倾斜不旋转
悬浮前效果：
悬浮后效果：
