项目8利用CSS3制作网页特效录定义平移效果定义缩放效果定义倾斜效果定义2D旋转效果

050607目录定义变形原点定义3D旋转效果定义过渡效果08设置过渡效果持续时间

0910目录制作过渡效果速度曲线制作CSS3动画效果

项目描述前面的项目制作的网页基本是静态效果，在传统网页设计中，一般使用JavaScript脚本或者Flash来制作网页动态特效，而CSS3提供了对动画的强大支持，可以实现变形、过渡、动画等效果，大大降低了制作网页特效的难度。本项目利用CSS3的这些功能制作一个“旋转的3D相册”页面。

项目效果图

知识储备

知识目标理解并掌握transform（变形）属性的用法和意义。掌握transition（过渡）属性的用法和意义。010203掌握动画属性及属性对应的不同属性值的用法和意义。

定义平移效果01

任务描述利用CSS3中transform属性的translate()方法定义盒子模型移动后的坐标，实现元素平移效果。平移后的效果如右图所示。

知识点拨?transform01transform是CSS3新增的属性，可以实现元素的变形效果，如平移、倾斜、缩放及翻转等。?translate()方法02translate()方法能够重新定义元素的坐标，实现平移效果，该方法包含两个参数，分别用于定义X轴和Y轴坐标，基本语法格式如下。transform:translate(x-value,y-value);在上面的语法格式中，x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离，第二个参数可省略，省略后取默认值0，当值为负数时，表示元素向反方向移动。

定义缩放效果02

任务描述利用CSS3中transform属性的scale()方法实现盒子模型放大1.5倍的效果。原效果和放大1.5倍后的效果如右图所示。原效果放大1.5倍后的效果

知识点拨在CSS3中，可以利用transform属性的scale()方法实现元素的缩放效果，缩放是指“缩小”和“放大”的意思。scale()方法与translate()方法类似，用法如下。（1）scaleX(x)：元素仅在水平方向上缩放（X轴缩放）。（2）scaleY(y)：元素仅在垂直方向上缩放（Y轴缩放）。（3）scale(x,y)：元素在水平方向和垂直方向上同时缩放（X轴和Y轴同时缩放）。其中，参数x表示元素在X轴方向上的缩放倍数，参数y表示元素在Y轴方向上的缩放倍数。

定义倾斜效果03

任务描述利用CSS3中transform属性的skew()方法实现盒子模型倾斜的效果，如右图所示。任务3效果

知识点拨?skew()方法01利用transform属性的skew()方法可以实现元素的倾斜效果，其用法和translate()、scale()方法类似，基本语法格式如下。transform:skew(x,y);在上面的语法格式中，x和y分别代表相对于X轴和Y轴倾斜的角度，如果省略了第二个参数，则其取默认值0。

定义2D旋转效果04

任务描述利用CSS3中transform属性的rotate()方法实现素材图片在2D空间中旋转的效果。旋转后的效果如右图所示。任务4效果

知识点拨利用transform属性的rotate()方法能够实现元素的旋转效果，主要在2D空间中进行操作，该方法中的参数允许出现负值，这时元素将进行逆时针旋转，基本语法格式如下。transform:rotate(角度值);在上面的语法格式中，如果角度值为正值，则元素按照顺时针旋转，否则，按照逆时针旋转。

定义变形原点05

任务描述利用transform-origin属性更改元素变形原点实现元素变形效果。变形后的效果如右图所示。任务5效果图

知识点拨?transform-origin属性01通过transform属性可以实现元素的平移、缩放、倾斜及旋转效果，这些变形操作是以元素的原点作为参照的。在默认情况下，元素的原点在X轴和Y轴的50%位置，如果需要更改这个原点，就可以使用transform-origin属性，其基本语法格式如下。transform-origin:x-axisy-axisz-axis;在上面的语法格式中，每个属性值都代表一个偏移量，具体描述如下表所示。

定义3D旋转效果06

任务描述利用rotateX()、rotateY()、rotateZ()、translateZ()及perspective属性，制作一个可以实现3D旋转的“禁毒宣传标语”。旋转前后的效果分别如右图所示。旋转前的效果旋转后的效果

知识点拨?rotateX()01rotateX()函数用于在3D空间中使元素沿X轴旋转?。它接受一个角度值作为参数，用于指定旋转的角度。当参数为正值时，元