第13章 CSS 30动画效果.pptVIP

在网页中如果需要使一些元素产生倾斜等变换效果，则需要通过将图像制作成倾斜的效果来实现，而在CSS 3.0中，新增了transform属性，通过该属性的设置可以使网页中的元素产生各种变换效果。 13.1.1　transform属性 CSS 3.0新增的transform属性可以在网页中实现元素的旋转、缩放、移动、倾斜等变换效果。transform属性的语法如下。 transform: none | transform-function; 13.1.2　旋转变形 设置transform属性值为rotate()函数，即可实现网页元素的旋转变换。rotate()函数用于定义网页元素在二维空间中的旋转变换效果。rotate()函数的语法如下。 transform: rotate(angle); 实战练习——实现网页元素旋转 最终文件：光盘\最终文件\第13章\13-1-2.html 视频：光盘\视频\第13章\13-1-2.swf 13.1.3　缩放和翻转变形 设置transform属性值为scale()函数，即可实现网页元素的缩放和翻转效果。scale()函数用于定义网页元素在二维空间的缩放和翻转效果。scale()函数的语法如下。 transform: scale(x,y); 实战练习——实现网页元素的缩放和翻转 13.1.4　移动变形 设置transform属性值为translate()函数，即可实现网页元素的移动。translate()函数用于定义网页元素在二维空间的偏移效果。translate()函数的语法如下。 transform: translate(x,y); 实战练习——实现网页元素的移动 最终文件：光盘\最终文件\第13章\13-1-3.html 视频：光盘\视频\第13章\13-1-3.swf 最终文件：光盘\最终文件\第13章\13-1-4.html 视频：光盘\视频\第13章\13-1-4.swf 13.1.5　倾斜变形 设置transform属性值为skew()函数，即可实现网页元素的倾斜效果。skew()函数用于定义网页元素在二维空间中的倾斜变换，skew()函数的语法如下。 transform: skew(angleX,angleY); 实战练习——实现网页元素的倾斜效果 13.1.6　矩阵变形 设置transform属性值为matrix()函数，即可实现网页元素的矩阵变形。matrix()函数用于定义网页元素在二维空间的矩阵变形效果，matrix()函数的语法如下。 transform: matrix(m11,m12,m21,m22,x,y); 实战练习——实现网页元素的矩阵变形效果 最终文件：光盘\最终文件\第13章\13-1-5.html 视频：光盘\视频\第13章\13-1-5.swf 最终文件：光盘\最终文件\第13章\13-1-6.html 视频：光盘\视频\第13章\13-1-6.swf 13.1.7　定义变形中心点 transform属性可以实现对网页元素的变换，默认的变换原点是元素对象的中心点。在CSS 3.0中新增了transform-origin属性，通过该属性可以设置元素变换的中心点位置。 transform-origin: x-axis y-axis; 实战练习——设置网页元素的变形中心点 13.1.8　同时使用多个变形函数 矩阵变形虽然非常灵活，但是并不容易理解，也不是很直观。transform属性允许同时设置多个变形函数，这使得元素变形可以更加的灵活。在为transform属性设置多个函数时，各函数之间使用空格进行分隔。 transform: rotate(angle) scale(x,y) translate(x,y) skew(angleX,angleY) matrix(m11,m12,m21,m22,x,y); 实战练习——为网页元素同时应用多个变形效果 最终文件：光盘\最终文件\第13章\13-1-7.html 视频：光盘\视频\第13章\13-1-7.swf 最终文件：光盘\最终文件\第13章\13-1-8.html 视频：光盘\视频\第13章\13-1-8.swf 在上一节中所介绍的transform属性所实现的是网页元素的变换效果，仅仅呈现的是元素变换的结果。在CSS 3.0中还新增了transition属性，通过该属性可以设置元素的变换过渡效果，可以让元素的变换过程看起来更加平滑。 13.2.1　transition属性 CSS 3.0新增了transition属性，通过该属性可以实现网页元素变换过程中的过渡效果，即在网页中实现了基本的动画效果。 transition: transition-property || transition-duration |