项目十《HTML5+CSS3项目开发案例教程》.pptx

变形、过渡与动画项目10

项国导读

CSS3提供了对动态特效的强大支持，包括变形、过渡与动画等，使

用它们能够制作缓缓放大、缓缓缩小等特殊效果。本项目将介绍CSS3变形、过渡与动画的相关知识，以及使用它们制作动态特效的方法。

学习目标

◆掌握使用CSS3设置变形效果的方法。

◆掌握使用CSS3设置过渡效果的方法。

◆掌握使用CSS3设置动画效果的方法。

◆了解制作动画片段的方法。

内容概览

变形效果

·变形属性

·2D变形·3D变形

10.1.1变形属性

在之前的CSS版本中，仅靠样式表文件无法制作变形效果，只能依赖于JavaScript脚本。在CSS3中，使用transform属性即可实现元素的平移、缩放与旋转等效果，具体格式为：

transform:noneltransform-functions;

其中，none是默认值，表示无变形效果；transform-functions表示变形方法，可以设

置多个，不同的变形方法用空格隔开。变形方法有如下几种。

(1)translate(),平移方法，用于重新设置元素的位置。

(2)scale(,缩放方法，用于改变元素的尺寸。

(3)rotate(),旋转方法，用于使元素旋转一个角度。(4)skew(),倾斜方法，用于使元素倾斜一个角度。

10.1.22D变形

以元素中心为原点创建一个二维坐标系，如下图10-1所示。沿坐标系中的x轴或y轴

对元素进行调节产生的变形效果称为2D变形。

1.平移

translate()方法可以重新定义元素在二维坐标系中的坐标，实现平移变形，具体格式为：

transform:translate(length-x,length-y);

其中，length-x与length-y分别表示元素在x轴与y轴方向上移动的距离，参数值为数值与单位或者百分比，可以为负值。如果只设置一个参数值，则第二个参数值默认为0。

在DW中打开本书配套素材“项目10”→translate.html

文档，该文档中已经创建好div元素，并设置了简单的样式，页面

效果如下图10-2所示。

【例10-1】平移变形的演示。

在.d2{….}中添加以下代码，使子元素同时向x轴和y轴方向移动

50px,页面效果如下图10-3所示。

transform:translate(50px,50px);

步骤2

2.缩放

scale()方法能够使元素的宽度与高度按比例放大或缩小，实现缩放变形，具体格式为：

transform:scale(times-x,times-y);

其中，times-x与times-y分别表示元素宽度与高度的缩放倍数，参数值大于1表

示按比例放大，参数值小于1则表示按比例缩小。

如果只设置一个参数值，则表示同时设置宽度与高度的缩放比例。当参数值为负数时，会将元素翻转显示。

例如，当times-X设置为负数时，缩放后的元素将以y轴为基准水平翻转。

在DW中打开本书配套素材“项目10”→“scale.html”文档，该

文档中有一个设置了边框样式的图像，页面效果如下图10-4所示。

【例10-2】缩放变形的演示。

在img{.….}中添加以下代码，使图像元素的宽度放大五分之一、高度缩小五分之一后再水平翻转，页面效果如下图10-5所示。

transform:scale(-1.2,0.8);

步骤2

3.旋转

rotate()方法能够使元素以原点为中心顺时针或逆时针转动一定角度，实现旋转变形，具体格式为：

transform:rotate(angle);

其中，angle表示旋转的角度，如30deg。deg为角度的单位，

表示度。当参数值为正值时，元素按顺时针旋转，反之则按逆时针旋转。

在DW中打开本书配套素材“项目10”→“rotate.html”文档，

该文档中有一个设置了外边距的图像，页面效果如下图10-6所示。

③rotatehtml十

6→C①文件|D:/空例与素材/项目10/rotat.☆

【例10-3】旋转变形的演示。

步骤1

在img{….}中添加以下代码，使图像元素顺时针旋转45度，页面效果如下图10-7所示。

transform:rotate(45deg);

其中，angle-y与angle-x分别表示元素相对于y轴与x轴的倾斜角度，设置方法与rotate()相同，但是不同的是，当参数值为正数时表示逆时针倾斜，反之表示顺时针倾斜。当只设置一个参数值时，第