，用以放入尾部导航。
3.2.3项目知识点分解
Picture.html页面中实现了图片的阴影效果、图片的旋转动画效果、渐变背景效果等，所以该项目涉及的新知识点导图如
图313所示。
图313项目32知识点分解
3.2.4知识点解析
1. CSS渐变
渐变背景在Web页面中极为常见，但在CSS3之前，设计师都是通过图形软件设计渐变效果，之后以图片形式或者背景图片的形式运用到页面中。很多时候，还需进行切图，再通过样式应用到页面中，过程比较烦琐； 而且在实际应用中可扩展性差，还直接影响页面性能。
自从W3C组织将渐变设计收入到CSS3标准中，渐变(gradients)很好地解决了上述问题。另外，渐变(gradient)是由浏览器生成的，放大时看起来效果更好。目前，越来越多的浏览器都支持这个属性了。
渐变在理论上可在任何使用url()值的地方采用，比如最常见的backgroundimage、liststyletype以及前面介绍的CSS3的图像边框属性borderimage，但在背景图片中得到的支持较为完美。
CSS3 渐变(gradients)可以在两个或多个指定的颜色之间显示平稳过渡。CSS3 定义了线性渐变
(linear gradients)和径向渐变(radial gradients)两种类型的渐变。
1) 线性渐变
为了创建一个线性渐变，必须至少定义两种颜色节点。颜色节点是想要呈现平稳过渡的颜色。同时，可以设置一个起点和一个方向(或一个角度)。语法规则如下。
background: linear-gradient(direction, color-stop1, color-stop2, …);
(1) 线性渐变——从上到下(默认情况下)。
下面的代码演示了从上到下的线性渐变。起点是红色，慢慢过渡到蓝色。
CSS部分：
#grad0 {
height: 200px;
background: -webkit-linear-gradient(red , blue); /*Safari 5.1 - 6.0*/
background: -o-linear-gradient(red, blue); /*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(red, blue); /*Firefox 3.6 - 15*/
background: linear-gradient(red , blue); /*标准的语法(必须放在最后)*/
}
HTML部分：
线性渐变 - 默认情况下，从上到下
从上边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
(2) 线性渐变——从左到右。
下面的代码演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色。
CSS部分：
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, red, blue); /*Safari 5.1 - 6.0*/
background: -o-linear-gradient(left, red, blue); /*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(left, red, blue); /*Firefox 3.6 - 15*/
background: linear-gradient(to right, red, blue); /*标准的语法(必须放在最后)*/
}
HTML部分：
线性渐变 - 从左到右
从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
(3) 线性渐变——从右到左。
CSS部分：
#grad2 {
height: 200px;
background: -webkit-linear-gradient(right, red , blue); /*Safari 5.1 - 6.0*/
background: -o-linear-gradient(right, red, blue); /*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(right, red, blue); /*Firefox 3.6 - 15*/
background: linear-gradient(to left, red , blue); /*标准的语法(必须放在最后)*/
}
HTML部分：
线性渐变 - 从右到左
从右边开始的线性渐变。起点是红色，慢慢过渡到蓝色：
线性渐变 - 对角
从左上角开始(到右下角)的线性渐变。起点是红色，慢慢过渡到蓝色：
(5) 线性渐变——使用角度。
如果还想更多地控制渐变方向，可以改变渐变的角度，而不用预定义方向(to bottom、to top、to right、to left、to bottom right，等等)。
语法规则如下。
background: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变，180deg将创建一个从上到下的渐变，-90deg将创建一个从右到左的渐变。
CSS部分：
#grad4 {
height: 100px;
background: -webkit-linear-gradient(0deg, red, blue); /*Safari 5.1 - 6.0*/
background: -o-linear-gradient(0deg, red, blue); /*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(0deg, red, blue); /*Firefox 3.6 - 15*/
background: linear-gradient(0deg, red, blue); /*标准的语法(必须放在最后)*/
}
#grad5 {
height: 100px;
background: -webkit-linear-gradient(90deg, red, blue); /*Safari 5.1 - 6.0*/
background: -o-linear-gradient(90deg, red, blue); /*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(90deg, red, blue); /*Firefox 3.6 - 15*/
background: linear-gradient(90deg, red, blue); /*标准的语法(必须放在最后)*/
}
#grad6 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, blue); /*Safari 5.1 - 6.0*/
background: -o-linear-gradient(180deg, red, blue); /*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(180deg, red, blue); /*Firefox 3.6 - 15*/
background: linear-gradient(180deg, red, blue); /*标准的语法(必须放在最后)*/
}
#grad7 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, blue); /*Safari 5.1 - 6.0*/
background: -o-linear-gradient(-90deg, red, blue); /*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(-90deg, red, blue); /*Firefox 3.6 - 15*/
background: linear-gradient(-90deg, red, blue); /*标准的语法(必须放在最后)*/
}
HTML部分：
线性渐变 - 使用不同的角度
0deg
90deg
180deg
-90deg
其他角度的读者可以自己尝试一下。
(6) 线性渐变——使用多个颜色节点。
上述一直实现的是两个颜色节点的渐变，那如何实现多个颜色节点的渐变呢？只需在参数中多加一个颜色节点即可。
CSS部分：
#grad8 {
height: 200px;
background: -webkit-linear-gradient(red, green, blue); /*Safari 5.1 - 6.0*/
background: -o-linear-gradient(red, green, blue); /*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(red, green, blue); /*Firefox 3.6 - 15*/
background: linear-gradient(red, green, blue); /*标准的语法(必须放在最后)*/
}
HTML部分：
3个颜色节点(均匀分布)
若要写出含7个颜色节点彩虹色块的效果，添加7个颜色节点即可，代码如下。
CSS部分：
#grad9 {
height: 200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet);/*Safari 5.1 - 6.0*/
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet);
/*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet);
/*Firefox 3.6 - 15*/
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
/*标准的语法(必须放在最后)*/
}
HTML部分：
7个颜色节点(均匀分布)
再稍加修改下，添加一个方向left，可以变成彩虹条的效果。
(7) 线性渐变——颜色分布不均匀。
上述颜色渐变都是均匀渐变，若颜色分布不均匀的渐变该如何设置呢？下面的代码演示了不均匀渐变。
#grad10 {
height: 200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%);
/*Safari 5.1 - 6.0*/
background: -o-linear-gradient(red 10%, green 85%, blue 90%);
/*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(red 10%, green 85%, blue 90%);
/*Firefox 3.6 - 15*/
background: linear-gradient(red 10%, green 85%, blue 90%);
/*标准的语法(必须放在最后)*/
}
红色部分从顶端就开始着色，到10%处开始渐变到绿色，渐变过渡区的占比为总的空间(高度或宽度)减去上下两个着色块空间占比剩下的空间。理解下面的绿色和蓝色开始着色及过渡的方法同上面的一致。
(8) 线性渐变——透明度变化。
CSS3渐变也支持透明度(transparent)，可用于创建透明度变化的效果。
要添加透明度，需使用 rgba()函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度： 0 表示完全透明，1 表示完全不透明。具体实例如下，演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色。
CSS部分：
#grad11 {
height: 200px;
background: -webkit-linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
/*Safari 5.1 - 6.0*/
background: -o-linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
/*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
/*Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
/*标准的语法(必须放在最后)*/
}
HTML部分：
线性渐变 - 透明度
为了添加透明度，我们使用rgba()函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度： 0 表示完全透明，1 表示完全不透明。
总的来看，上述线性渐变的效果主要取决于渐变的方向、颜色节点以及位置。
2) 径向渐变
径向渐变由它的中心定义渐变效果。为了创建一个径向渐变，必须至少定义两种颜色节点。颜色节点是想要呈现平稳过渡的颜色。同时，还可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下，渐变的中心是 center(表示在中心点)，渐变的形状是 ellipse(表示椭圆形)，渐变的大小是 farthestcorner(表示到最远的角落)。
语法规则如下。
background: radial-gradient(center, shape size, start-color, …, last-color);
(1) 径向渐变——颜色节点均匀分布。
颜色节点均匀分布的径向渐变的代码如下。
CSS部分：
#grad1 {
height:150px;
width:200px;
background: -webkit-radial-gradient(green,purple,red); /*Safari 5.1 - 6.0*/
background: -o-radial-gradient(green,purple,red); /*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(green,purple,red); /*Firefox 3.6 - 15*/
background: radial-gradient(green,purple,red); /*标准的语法(必须放在最后)*/
}
HTML部分：
径向渐变 - 颜色节点均匀分布
(2) 径向渐变——颜色节点不均匀分布。
颜色节点不均匀分布的径向渐变代码如下。
CSS部分：
#grad2 {
height:150px;
width:200px;
background: -webkit-radial-gradient(green 5%,purple 15%,red 60%);
/*Safari 5.1 - 6.0*/
background: -o-radial-gradient(green 5%,purple 15%,red 60%);
/*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(green 5%,purple 15%,red 60%);
/*Firefox 3.6 - 15*/
background: radial-gradient(green 5%,purple 15%,red 60%);
/*标准的语法(必须放在最后)*/
}
HTML部分：
径向渐变 - 颜色节点不均匀分布
(3) 径向渐变——形状变化。
径向渐变中还可以设置形状。shape 参数定义了形状。值为circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
椭圆形Ellipse(默认)实例如下。
CSS部分：
#grad3 {
height:150px;
width:200px;
background: -webkit-radial-gradient(red,yellow,green); /*Safari 5.1 - 6.0*/
background: -o-radial-gradient(red,yellow,green); /*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(red,yellow,green); /*Firefox 3.6 - 15*/
background: radial-gradient(red,yellow,green); /*标准的语法(必须放在最后)*/
}
HTML部分：
椭圆形 Ellipse(默认)：
圆形Circle实例如下。
CSS部分：
#grad4 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(circle,green,purple,red); /*Safari 5.1 - 6.0*/
background: -o-radial-gradient(circle,green,purple,red); /*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(circle,green,purple,red); /*Firefox 3.6 - 15*/
background: radial-gradient(circle,green,purple,red); /*标准的语法(必须放在最后)*/
}
HTML部分：
圆形 Circle：
(4) 径向渐变——大小变化。
径向渐变中还可以设置size，即定义渐变的大小，如表310所示。
表310径向渐变size值及其描述
size值描述
farthestcorner (默认)指定径向渐变的半径长度为从圆心到离圆心最远的角
closestside指定径向渐变的半径长度为从圆心到离圆心最近的边
closestcorner指定径向渐变的半径长度为从圆心到离圆心最近的角
farthestside指定径向渐变的半径长度为从圆心到离圆心最远的边
利用不同尺寸大小关键字的实例如下。
CSS部分：
#grad5 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%,closest-side,green,purple,red,black); /*Safari 5.1 - 6.0*/
background: -o-radial-gradient(60% 55%,closest-side,green,purple,red,black);
/*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(60% 55%,closest-side,green,purple,red,black);
/*Firefox 3.6 - 15*/
background: radial-gradient(60% 55%,closest-side,green,purple,red,black);
/*标准的语法(必须放在最后)*/
}
#grad6 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%,farthest-side,green,purple,red,black); /*Safari 5.1 - 6.0*/
background: -o-radial-gradient(60% 55%,farthest-side,green,purple,red,black);
/*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(60% 55%,farthest-side,green,purple,red,black);
/*Firefox 3.6 - 15*/
background: radial-gradient(60% 55%,farthest-side,green,purple,red,black);
/*标准的语法(必须放在最后)*/
}
#grad7 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, closest-corner,green,purple,red,black); /*Safari 5.1 - 6.0*/
background: -o-radial-gradient(60% 55%, closest-corner,green,purple,red,black);
/*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(60% 55%, closest-corner,green,purple,red,black); /*Firefox 3.6 - 15*/
background: radial-gradient(60% 55%, closest-corner,green,purple,red,black);
/*标准的语法(必须放在最后)*/
}
#grad8 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,green,purple,red,black); /*Safari 5.1 - 6.0*/
background: -o-radial-gradient(60% 55%, farthest-corner,green,purple,red,black);
/*Opera 11.6 - 12.0*/
background: -moz-radial-gradient(60% 55%, farthest-corner,green,purple,red,black); /*Firefox 3.6 - 15*/
background: radial-gradient(60% 55%, farthest-corner,green,purple,red,black);
/*标准的语法(必须放在最后)*/
}
HTML部分：
closest-side：
farthest-side：
closest-corner：
farthest-corner(默认)：
课堂小实践
如果想重复一个渐变，可以使用repeatinglineargradient和repeatingradialgradient。 尝试做出如图314和图315所示效果图。
图314repeatinglineargradient效果
图315repeatingradialgradient效果
2. CSS阴影
boxshadow给元素添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2~4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。语法规则如下。
box-shadow: h-shadow v-shadow blur spread color inset;
CSS3阴影属性值及其描述如表311所示。
表311CSS3阴影属性值及其描述
属性值描述
hshadow必需。水平阴影的位置。允许负值
vshadow必需。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的尺寸
color可选。阴影的颜色
inset可选。将外部阴影(outset)改为内部阴影
boxshadow案例如下。
demo39/boxshadow.html:
box-shadow
3. CSS动画
CSS过渡也有缺陷，在其知识点讲解中已经做了描述，而CSS 动画(Animation)正是为了解决这些缺陷而提出的。Animation在不需要触发任何事件的情况下，也可以显式地随时间变化来改变元素CSS属性，达到一种动画的效果； 并且动画可以设置多个帧，增加动画的复杂程度。
一个完整的CSS动画由两个部分组成： 一组定义的动画关键帧和描述该动画的CSS声明。
1) @keyframes规则的语法格式
使用@keyframes规则来创建动画，keyframes可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分多彩。
@keyframes规则的语法格式如下。
@keyframes animationname {
keyframes-selector{CSS-styles;}
}
CSS3动画@keyframes属性值及其描述如表312所示。
表312CSS3动画@keyframes属性值及其描述
属性值描述
animationname表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空
keyframesselector是关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置值可以是一个百分比、from或者to。其中，from和0效果相同，表示动画的开始； to和100%效果相同，表示动画的结束
CSSstyles定义执行到当前关键帧时对应的动画状态
注意，以上三个属性都是必需，缺一不可。
2) animation属性
animation属性将动画与元素绑定，用于描述动画的CSS声明，包括指定具体动画以及动画时长等行为。
animation属性的基本语法如下。
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
以上参数分别对应8个子属性，如表313所示。
表313CSS3动画animation子属性及其描述
属性值描述
animationname指定要绑定到选择器的关键帧的名称
animationduration动画指定需要多少秒或毫秒完成
animationtimingfunction设置动画将如何完成一个周期，使用名为三次贝塞尔(Cubic Bezier)函数的数学函数，来生成速度曲线。在该函数中使用自己的值，也可以使用预定义的值。
linear： 动画从头到尾的速度是相同的。
ease： 默认，动画以低速开始，然后加快，在结束前变慢。
easein： 动画以低速开始。
easeout： 动画以低速结束。
easeinout： 动画以低速开始和结束。
cubicbezier(n,n,n,n)： 在cubicbezier函数中自己的值。可能的值是从0到1的数值
animationdelay设置动画在启动前的延迟间隔
animationiterationcount定义动画的播放次数，若值为infinite，则规定动画应该无限次播放
animationdirection指定是否应该轮流反向播放动画，取值如下。
normal： 默认值，动画应该正常播放。
alternate： 动画应该轮流反向播放
animationfillmode规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式。动画按执行时间来划分，分为三个过程，或者说一次动画过程可以将元素划分为三个状态： 动画等待、
动画进行和动画结束。默认情况下，只有在动画进行状态，才会应用@keyframes所声明的动画； 而在动画等待和动画结束状态，对元素样式并不会产生任何的影响。取值如下。
none： 默认值。动画不会对动画等待和动画完成的元素样式产生改变。
forwards： 告诉浏览器动画结束后，元素的样式将设置为动画的最后一帧的样式。
backwards： 在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式。
both： 相当于同时配置了backwards和forwards，意味着在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式
animationplaystate指定动画是否正在运行或已暂停，取值如下。
paused： 规定动画已暂停
running： 规定动画正在播放
initial设置属性为其默认值
inherit从父元素继承属性
下面通过一个案例演示CSS动画使用方法。
CSS animation
div区块逐渐由小变大再逐渐由大变小
在这个实例中，用@keyframes规则定义了一个名称为mymove的动画，在该动画中定义了三个关键帧： 第一个关键帧，即动画开始时，区块宽度和高度都为300px； 第二个关键帧，即50%处，区块高度和宽度都为100px； 第三个关键帧，即动画结束时，区块大小恢复至300px。使用animation属性调用了这个动画效果并应用到了div区块上，形成了区块由大到小再由小到大的动画效果。如果只设立两帧，要形成实例中的效果，该如何设置呢？
课堂小实践
题目1： 在网页中对一个div元素制作出从绿色变为蓝色，再从蓝色变为绿色的效果。
题目2： 下载齿轮图片，运用CSS动画制作成齿轮转动的效果。
4. CSS变形
CSS transform允许对元素在二维或三维空间进行旋转、缩放、移动或倾斜。3D变形与2D变形的最大不同就在于其参考的坐标轴不同，2D变形的坐标轴是平面的，只存在X轴和Y轴； 而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间，X轴正向是朝右，Y轴正向是朝下，Z轴正向是朝屏幕外，如图316所示。
图316三维坐标系统示意
本教材中主要讲解二维空间下的几种变形方式。
transform的语法规则如下。
transform:none |
［ ］*
也就是：
transform: rotate | scale | skew | translate |matrix;
其中，none表示不进行变换； 表示一个或多个变换函数，即可以同时对一个元素进行transform的多种属性操作，但需注意的是，以往叠加效果是用逗号(“，”)隔开，但transform中使用多个属性时却需要用空格隔开。
1) 变形原点
transformorigin是变形原点，也就是元素围绕着变形或旋转的那个点。此属性只有在设置了transform属性的时候才起作用； 元素默认基点就是其中心位置，但若需要在不同的位置对元素进行这些操作，就需使用transformorigin来对元素进行基点位置改变，使元素基点不再是中心位置，以满足多种需求。
语法规则如下。
transform-origin: x-axis y-axis z-axis;
transformorigin最多接受三个值，分别是X轴、Y轴和Z轴的偏移量，如表314所示。
表314transformorigin属性值及其描述
属性值描述
xaxisX轴的偏移量。可能的值：
left
center
right
length
%
yaxisY轴的偏移量。可能的值：
top
center
bottom
length
%
zaxisZ轴的偏移量。可能的值：
length
其中，left、center、right是水平方向的取值，对应的百分值为left=0%;center=50%;right=100%，而top、center、bottom是垂直方向的取值，对应的百分值为top=0%;center=50%;bottom=100%，如果只取一个值，表示垂直方向值不变。
需要注意的是，transformorigin并不是transform中的属性值，它有自己的语法，但是要结合transform才能起作用。
2) rotate
rotate()方法通过角度参数值来设定旋转的幅度。语法规则如下。
transform:rotate();
若角度值为正数，元素将顺时针旋转； 若为负数，元素将逆时针旋转。
还可以使用rotateX()与rotateY()方法将元素只在水平方向或垂直方向旋转。
3) scale
scale()方法用于将元素缩放。在二维空间中，可以分别指定元素水平方向的缩放倍率与垂直方向的缩放倍率，语法规则如下。
transform:scale(X,Y);
其中，X与Y的值设置为0.01~0.99的任何值时，使一个元素缩小； 而设置为任何大于或等于1的值时，
使一个元素放大； Y是一个可选参数，如果没有设置Y值，则表示X和Y两个方向的缩放倍数是一样的。
还可以使用scaleX()与scaleY()方法将元素只在水平方向或垂直方向缩放。
4) skew
skew()方法用于将元素倾斜显示，可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()方法的旋转不同，rotate()方法只是旋转，而不会改变元素的形状。语法规则如下。
transform: skew(x-angel, y-angel);
其中，xangel用来指定元素水平方向(X轴方向)倾斜的角度； yangel用来指定元素垂直方向(Y轴方向)倾斜的角度，如果未显式地设置这个值，其默认值为0。
还可以使用skewX()和skewY()方法将元素只在水平方向或垂直方向倾斜。
在默认情况下，skew()函数都是以元素的原中心点对元素进行倾斜变形，当然也可以根据transformorigin属性重新设置元素基点对元素进行倾斜变形。
5) translate
translate()方法用于将元素向指定的方向移动。语法规则如下。
transform: translate(tx,ty);
其中，translate()方法可以取一个值，即ty没有显式设置时，相当于ty=0； 若同时取两个值tx和ty，tx是一个代表X轴(横坐标)移动的向量长度，当其值为正值时，元素向X轴右方向移动，反之其值为负值时，元素向X轴左方向移动； ty是一个代表Y轴(纵坐标)移动的向量长度，当其值为正值时，元素向Y轴下方向移动，反之其值为负值时，元素向Y轴上方向移动。
变形综合案例如下。
demo311/transform.html:
transform
6) 2D转换矩阵matrix(n,n,n,n,n,n)
matrix()方法把所有 2D 转换方法组合在一起。matrix()方法共需要六个参数，包含数学函数，允许旋转、缩放、移动以及倾斜元素。
demo310/matrix.html：
2D转换矩阵matrix
这是一个 div 元素。
这是一个 div 元素。
3.2.5知识点检测
3.2.6项目实现
通过项目分析和CSS渐变、变形、动画、阴影等知识点学习，读者定能逐步理解并完成“图说我们盐城”页面(Picture.html)的代码编写。参考代码如下。
Picture.html：
图说盐城
对应的部分样式规则：
body {
margin: 0;
padding: 0;
background: url(../images/Picture_img_bg.jpg);
height: 100%;
}
header {
text-align: center;
}
section {
width: 1000px;
margin: 0 auto;
}
.culture {
width: 980px;
border: 1px solid #ccc;
padding: 10px 10px;
background: -webkit-linear-gradient(0deg, #ffffff,rgba(255, 255,255, 0.2));
/*Safari 5.1 - 6.0*/
background: -o-linear-gradient(0deg,#ffffff,rgba(255, 255,255, 0.2));
/*Opera 11.1 - 12.0*/
background: -moz-linear-gradient(0deg,#ffffff,rgba(255, 255,255, 0.2));
/*Firefox 3.6 - 15*/
background: linear-gradient(0deg,#ffffff,rgba(255, 255,255, 0.2));
/*标准的语法(必须放在最后)，设置线性渐变的背景*/
margin: 10px;
}
.culture .title {
border-bottom: 1px solid #f8d361;
height: 50px;
line-height: 55px;
overflow: hidden; /*溢出时内容会被修剪，并且其余内容不可见*/
}
.more {
float: right;
margin: 5px;
font-weight: normal;
font-size: 14px;
}
.pic1 img,.pic2 img {
width: 300px;
margin: 10px;
}
.pic1 img{
box-shadow: 5px 5px 5px #999999;
}
.pic2 img{
border-radius: 8px;
}
.green,.eat{
overflow: auto;
}
.item1{
width: 215px;
height: 145px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
padding: 10px;
background-color: #FFF;
float: left;
position: relative;
top:5px;
overflow: hidden;
transition: all .5s;/*过渡，all(默认值)指所有属性改变，整个转换过程在0.5s内完成。*/
border-radius: 5px; /*盒阴影： 向下偏移5px模糊值5px颜色为#41a8ff*/
}
.item1 .lipic {
margin: 0px;
}
.item1 .lipic img{
width: 100%;
}
.item1 .desc {
position: absolute; /*绝对定位*/
bottom: -80px;
width: 100%; /*宽度是父元素宽度的100%*/
height: 80px;
transition: all .5s;
background-color:rgba(36,158,88,0.6);
}
/*当鼠标悬停在该元素时，该元素绝对定位在父元素顶部-5px的位置，并且盒阴影为模糊度15px的#AAA色*/
.item1:hover {
top: -5px;
box-shadow: 0 0 15px #AAA;
}
/*当鼠标悬停在类名为item的元素上时，该元素的类名为.desc的子元素绝对定位，其底部与父元素底部对齐*/
.item1:hover .desc {
bottom: 0;
}
.item1 .detail{
font-weight: bold;
font-size: 20px;
margin-top: 30px;
}
.item2 {
width: 225px;
overflow: hidden;
position: relative;
margin: 10px;
float: left;
}
.item2 .hover {
width: 225px;
background: rgba(228,169,170,0.6);
position: absolute;
top: 0px;
left: 0;
text-align: center;
color: #fff;
transform: rotate(55deg); /*变形： 旋转55°*/
-webkit-transform: rotate(55deg);
transition: all 0.5s; /*过渡： 所有属性都改变，时长0.5s*/
-webkit-transition: all 0.5s;
overflow: hidden;
height: 0;
z-index: 4000; /*设置元素的堆叠顺序，属性值越大，该元素层离用户越近*/
}
.item2 .hover h3 {
color: #fff;
border-bottom: 2px solid rgba(76, 179,77, 0.5);
padding-bottom: 10px;
}
.item2:hover .hover {
height: 200px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
footer {
clear: both;
width: 880px;
margin: 0 auto;
}
footer>p {
font-family: 'STXingkai';
font-size: 35px;
color: #AAE6DA;
line-height: 20px;
padding: 20px;
text-align: center;
}
.services {
font-family: 'Microsoft Yahei';
font-size: 15px;
color: #374136;
padding-bottom: 50px;
text-align: center;
}
3.2.7项目总结
项目实施过程中，主要是练习CSS渐变、阴影、过渡、变形、复合选择器的使用； 要特别掌握综合使用CSS渐变、阴影、过渡、变形、复合选择器创建精美炫酷的动态效果； 通过搜集、整理、分析、归纳文化(如盐城)特色，进而了解家乡文化、热爱家乡文化，培养家国情怀、建设家乡的责任感和使命感； 同时通过对表现家乡文化图片的搜集、选取及优化处理，提升审美能力和艺术修养。
3.2.8能力拓展
搜集、整理、分析、归纳网站的“红色文化”及“特色美食”两个模块的资源，并进行优化处理，参考index.html和
Picture.html两个页面模仿设计redculture.html和delicious.html两个页面。