1.本章要求： 第12章 变换和动画相关属性 如何使用transform属性 如何选择、缩放、移动和倾斜动画 CSS3中过渡的由来 CSS3中过渡属性的使用 主要内容 1. CSS变换（变换）2.CSS过渡——过渡属性 3.CSS动画——动画属性 4.综合示例——模拟进度条效果 第十二章 变换及动画相关属性 12.1CSS变换（变换） 12.1.1 变换基础知识——transform属性 12.1.2旋转动画 —rotate() 函数 12.1.3 缩放动画 —scale() 函数 12.1.4 联通动画 —translate() 函数 12.1.5 倾斜动画 —skew() 函数 12.1.6 变换原点 —transform-origin 属性值/函数描述 none 表示不进行任何变换translate(length[,length])表示实现2D平移。 第一个参数对应于X轴，第二个参数对应于Y轴。 如果不提供第二个参数，则默认值为0translateX(length)，表示实现X轴（水平方向）的平移。 参数长度代表联通距离。 translateY(length) 代表 in。
2、实现Y轴（垂直方向）平移。 参数长度表示联通距离。scaleX(number)表示X轴缩放。scaleY(number)表示Y轴缩放。scale(number[,number])表示2D缩放。 第一个参数对应X轴（水平方向），第二个参数对应Y轴（垂直方向）。 如果不提供第二个参数，则默认使用第一个参数的值。 skew(angle[,angle]) 表示 2D 倾斜。 第一个参数对应于X轴，第二个参数对应于Y轴。 如果不提供第二个参数，则默认值为 0 skewX(angle) 表示 X 轴倾斜 skewY(angle) 表示 Y 轴倾斜rotate(angle) 表示 2D 旋转。 参数angle用于指定旋转角度矩阵(number,number,number,number,number,number)表示基于矩阵变换的函数。 它以包含六个值（a、b、c、d、e、f）的变换矩阵的形式指定2D变换，相当于直接应用[abcdef]变换矩阵。 即根据X轴（水平方向）和Y轴（垂直方向）重新定位元素。 该属性值的使用涉及到物理中矩阵12.1.1的变换属性。
3. CSS3中提供了transform和transform-origin两个属性来实现2D变换。 其中，transform属性用于实现平移、缩放、旋转、倾斜等2D变换，transform-origin属性用于设置变换的中心点。 下面将介绍如何实现平移、缩放、旋转、倾斜等2D变换，以及设置变换的中心点。 在进行详细介绍之前，我们先来了解一下transform属性的基本句式。 Translate属性的语句格式如下：translate:none|matrix(number,number,number,number,number,number)?translate(length[,length])?translateX(length)?translateY(length)?rotate （角度）？scale（数字[，数字]）？scaleX（数字）？scaleY（数字）？skew（角度[，角度]）？skewX（角度）||skewY（角度）？ 从句子格式可以看出，transform属性的属性值由表12-1所示的值和函数组成。 表 12-1。
4、将transform属性的rotate(angle)函数应用到transform属性的属性值上，可以实现2D旋转。 参数angle用于指定旋转的角度。 它的值可以是正值，也可以是负值。 正值表示顺时针旋转，负值表示逆时针旋转。 在使用该函数之前，可以使用transform-origin属性来定义变换的中心点。 【例12-1】应用transform属性的rotate()函数实现顺时针旋转30度和逆时针旋转30度css3 变形动画，关键代码如下： style.preview{background:url(images/style0.gif ）不重复； /*设置背景图片，且不重复*/position:absolute;/*设置为绝对布局*/top:0px;/*设置顶行间距*/left:0px;/*设置右侧间距* /宽度：240px； /*设置长度*/height:210px;/*设置高度*/}#rotate{-moz-transform:rotate(30deg);/*Firefox下顺时针旋转30度*/-webkit-transform:rotate(30deg) ; /*Chrome中顺时针旋转30度*/ -o-transform: ro.
5. Tate(30deg);/*Opera下顺时针旋转30度*/-ms-transform:rotate(30deg);/*IE下顺时针旋转30度*/} 12.1.2 旋转动画—rotate()函数#rotate1 {left:300px;-moz-transform:rotate(-30deg);/*Firefox下逆时针旋转30度*/-webkit-transform:rotate(-30deg);/*Chrome下逆时针旋转30度* /-o- transform:rotate(-30deg);/*Opera 下逆时针旋转 30 度*/-ms-transform:rotate(-30deg);/*IE 下逆时针旋转 30 度*/}#wall{background -image:url(images /bg_main.jpg);max-width:600px;/*设置最大长度*/height:300px;/*设置最大高度*/}/style/headbodystyle=margin:0px;divid=wall/ divdivclass=previewstyle=背景图像：无；边框。
6. r:1px#000000dashed;/divdivclass=previewid=rotate/divdivclass=previewid=rotate1/div 在 IE 浏览器中浏览该页面，可以看到如图 12-1 所示界面 图 12-1 将 Transform 属性应用到旋转 将音符图像逆时针旋转 30 度 顺时针旋转 30 度 虚线框的位置是原始图像的位置 应用变换的scale(number[,number])、scaleX(number)和scaleY(number)函数属性来实现缩放。 其中css3 变形动画，scale(number[,number])可以实现X轴和Y轴的同时缩放，而旁边的两个函数用于单独实现X轴或Y轴的缩放。 使用scale(number[,number])函数时，如果只指定一个参数，则该参数指定的比例将在X轴和Y轴上同时缩放。 这三个实现缩放的函数的参数值都是自然数（可以是正数、负数或小数）。 绝对值小于1，表示放大； 绝对值大于1，表示缩小。 当值为正时，对象被反转。 当参数值为1时，表示不缩放。 注意：使用scaleX(number)或scaleY(number)函数时，可以实现非比例列缩放。
7、即只能X轴缩放或者X轴可以缩放。 12.1.3 缩放动画——scale()函数 【例12-2】应用transform属性的scale()函数实现X轴和Y轴不同比例的同时缩放，应用scaleX()函数实现X轴缩放Zoom，关键代码如下： style.preview{background:url(images/style0.gif)no-repeat;/*设置背景图片不重复*/position:absolute ;/*设置为绝对布局*/top:0px ;/*设置顶行间距*/left:0px;/*设置右侧间距*/width:240px;/*设置长度*/height:210px;/*设置height*/#xy{-moz-transform:scale( 0.7,0.8);/*Firefox下X轴和Y轴上的缩放*/-webkit-transform:scale(0.7,0.8);/*X轴和Y轴上的缩放Chrome下Y轴*/-o-transform:scale(0.7,0.8);/*Opera下X、Y轴缩放*/-ms-transform:scale(0.7,0.8);/*X、Y轴缩放IE下的Y轴。
8、放入 */#x{left:300px;-moz-transform:scaleX(1.2);/*Firefox 沿 X 轴缩放*/-webkit-transform:scaleX(1.2);/*Chrome 沿 X 轴缩放轴上的缩放*/ -o-transform:scaleX(1.2);/*Opera下X轴上的缩放*/-ms-transform:scaleX(1.2);/*IE下X轴上的缩放*/ #wall{background-image:url(images/bg_main.jpg);max-width:600px;/*设置最大长度*/height:300px;/*set/style/headbodystyle=margin:0px;divid=wall/divdivclass =previewstyle=background-image:none;border:1px#000000dashed;/divdivclass=previewid=xy/divdivclass=previewid=x/div 在 IE 浏览器中浏览该页面，可以看到如图 12-2 所示的界面。 图 12-2 应用变换属性。
9. 将音符图像在 X 轴上缩放 120%，在 X 轴上缩放 70%，在 Y 轴上缩放 80%。 虚线框的位置就是原图的位置，应用transform属性的translate(length[,length])，translateX(length)和translateY(length)函数可以实现2D平移。 其中，translate(length[,length])可以实现X轴和Y轴的同时平移，其旁边的两个函数用于分别实现X轴或Y轴的平移。 如果将translate(length[,length])中的第一个参数设置为0，则可以实现translateY(length)函数的效果； 如果第二个参数设置为0，则可以实现translateX(length)函数的效果。 这三个函数实现平移的参数值都是像素值，可以是正值，也可以是负值。 x轴为正值时表示向右连接，为负值时表示向左连接，y轴为正值表示向上连通，负值表示向下连通。 注意：目前主流浏览器不支持标准的transform属性，所以在实际开发中需要添加各浏览器厂商的前缀。 例如，火狐浏览器需要添加-moz-前缀； IE浏览器添加-ms-前缀； 和欧佩。
10. ra浏览器添加-o-前缀； 为 Chrome 浏览器添加 -webkit- 前缀。 12.1.4 中国联通动画—translate()函数 【例12-3】应用transform属性的translate()函数实现X轴和Y轴同时平移，应用translateX()函数实现X轴平移，关键代码如下： style.preview{background:url(images/style0.gif)no-repeat;/*设置背景图片，不重复*/position:absolute ;/*设置为绝对布局*/top:0px;/*设置顶行距*/left:0px;/*设置右边距*/width:240px;/*设置长度*/height:210px;/*设置高度*/#xy{-moz-.
发表评论