HTML5+CSS3网页设计基础教程第15章-变形处理课件.ppt

1、HTML5+CSS3网页设计基础教程第15章 变形处理第1页第第15章章 变形处理变形处理本章概述 本章的学习目标主要内容HTML5+CSS3网页设计基础教程第15章 变形处理第2页本章概述本章概述l在在CSS3中，可以使用中，可以使用transform功能实现文字或功能实现文字或图像的旋转、缩放、倾斜和移动图像的旋转、缩放、倾斜和移动4种类型的变形种类型的变形处理。在变形处理中，会使用到处理。在变形处理中，会使用到deg这个单位，这个单位，这是一种角度单位。旋转操作通过使用这是一种角度单位。旋转操作通过使用rotate方方法来实现。缩放操作通过使用法来实现。缩放操作通过使用scale方法来实

2、现。方法来实现。倾斜操作通过使用倾斜操作通过使用skew方法来实现。移动操作通方法来实现。移动操作通过使用过使用translate方法来实现。在使用方法来实现。在使用transform功能实现变形操作时，可以指定变形的基准点。功能实现变形操作时，可以指定变形的基准点。本章主要来介绍这些内容。本章主要来介绍这些内容。HTML5+CSS3网页设计基础教程第15章 变形处理第3页本章的学习目标本章的学习目标l掌握掌握CSS3中中transform功能的使用方法，功能的使用方法，能够使用能够使用transform功能来实现文字或图像功能来实现文字或图像的旋转、缩放、倾斜和移动的变形效果。的旋转、缩放、

3、倾斜和移动的变形效果。l能够将旋转、缩放、倾斜和移动这能够将旋转、缩放、倾斜和移动这4种变形种变形效果结合使用，并知道使用的先后顺序不效果结合使用，并知道使用的先后顺序不同，页面显示结果会有什么样的区别。同，页面显示结果会有什么样的区别。l掌握掌握3D变形功能的概念和实现方法。变形功能的概念和实现方法。l掌握变形矩阵的基本概念和使用方法。掌握变形矩阵的基本概念和使用方法。HTML5+CSS3网页设计基础教程第15章 变形处理第4页主要内容主要内容15.1 认识认识transform15.2 2D变形变形 15.3 3D变形变形15.4 变形矩阵变形矩阵15.5 本章小结本章小结 HTML5+C

4、SS3网页设计基础教程第15章 变形处理第5页15.1 认识认识transforml在在CSS3中，使用中，使用transform属性来实现文字或图属性来实现文字或图像的旋转、缩放、倾斜、移动这像的旋转、缩放、倾斜、移动这4种类型的变形种类型的变形处理。处理。HTML5+CSS3网页设计基础教程第15章 变形处理第6页主要内容主要内容15.1 认识认识transform15.2 2D变形变形 15.3 3D变形变形15.4 变形矩阵变形矩阵15.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第15章 变形处理第7页15.2 2D变形变形 l15.2.1 旋转旋转l15.2.2 缩放

5、缩放l15.2.3 移动移动l15.2.4 扭曲扭曲l15.2.5 复杂变形复杂变形HTML5+CSS3网页设计基础教程第15章 变形处理第8页15.2.1 旋转旋转l旋转通过旋转通过rotate方法实现，使用格式如下：方法实现，使用格式如下：rotate();l通过指定的角度参数对原元素指定一个通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需先有旋转），需先有transform-origin属性的定义。属性的定义。transform-origin定义的是旋转的定义的是旋转的基点，其中基点，其中angle是指旋转角度，如果设置的值是指旋转角度，如果设置的值为正数表示顺时

6、针旋转，如果设置的值为负数，为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：则表示逆时针旋转。如：transform:rotate(30deg);。HTML5+CSS3网页设计基础教程第15章 变形处理第9页15.2.2 缩放缩放l缩放缩放scale具有具有3种情况：种情况：scale(x,y)使元素水平使元素水平方向和垂直方向同时缩放（也就是方向和垂直方向同时缩放（也就是X轴和轴和Y轴同时轴同时缩放）；缩放）；scaleX(x)元素仅水平方向缩放（元素仅水平方向缩放（X轴缩轴缩放）；放）；scaleY(y)元素仅垂直方向缩放（元素仅垂直方向缩放（Y轴缩轴缩放），但它们具有相同

7、的缩放中心点和基数，其放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为中心点就是元素的中心位置，缩放基数为1，如，如果其值大于果其值大于1元素就放大，反之其值小于元素就放大，反之其值小于1，元素，元素缩小。下面具体来看看这缩小。下面具体来看看这3种情况具体使用方法：种情况具体使用方法：transform:scale(2,1.5);/水平方向放大水平方向放大2倍，垂直方向倍，垂直方向放大放大1.5倍倍transform:scaleX(2);/水平方向放大水平方向放大2倍倍transform:scaleY(2);/垂直方向放大垂直方向放大2倍倍HTML5+CSS3网页

8、设计基础教程第15章 变形处理第10页15.2.3 移动移动l文字或图像的移动通过文字或图像的移动通过translate方法实现，和缩方法实现，和缩放类似，也分为放类似，也分为3种情况：种情况：translate(x,y)水平方水平方向和垂直方向同时移动（也就是向和垂直方向同时移动（也就是X轴和轴和Y轴同时移轴同时移动）；动）；translateX(x)仅水平方向移动（仅水平方向移动（X轴移轴移动）；动）；translateY(Y)仅垂直方向移动（仅垂直方向移动（Y轴移轴移动），具体使用方法如下：动），具体使用方法如下：transform:translate(100px,20px);/水平方向

9、移动水平方向移动100像素，垂直方向移动像素，垂直方向移动20像素像素transform:translateX(100px);/水平方向移动水平方向移动100像素像素transform:translateY(20px);/垂直方向移动垂直方向移动20像素像素HTML5+CSS3网页设计基础教程第15章 变形处理第11页15.2.4 扭曲扭曲l扭曲，有时候也称为倾斜操作，通过扭曲，有时候也称为倾斜操作，通过skew方法实方法实现。和现。和translate、scale一样，一样，skew方法也具有方法也具有3种情况：种情况：skew(x,y)使元素在水平和垂直方向同使元素在水平和垂直方向同时扭曲

10、（时扭曲（X轴和轴和Y轴同时按一定的角度值进行扭曲轴同时按一定的角度值进行扭曲变形）；变形）；skewX(x)仅使元素在水平方向扭曲变形仅使元素在水平方向扭曲变形（X轴扭曲变形）；轴扭曲变形）；skewY(y)仅使元素在垂直方仅使元素在垂直方向扭曲变形（向扭曲变形（Y轴扭曲变形），具体使用语法格轴扭曲变形），具体使用语法格式如下：式如下：transform:skew(30deg,10deg);/水平和垂直方向各扭水平和垂直方向各扭曲曲30度、度、10度度transform:skewX(30deg);/水平方向扭曲水平方向扭曲30度度transform:skewY(10deg);/垂直方向扭曲垂

11、直方向扭曲10度度HTML5+CSS3网页设计基础教程第15章 变形处理第12页15.2.5 复杂变形复杂变形l上一节介绍了使用上一节介绍了使用transform对元素进行旋转、对元素进行旋转、缩放、移动和扭曲的操作，本节介绍如何综合使缩放、移动和扭曲的操作，本节介绍如何综合使用这几种方法来对一个元素使用多重变形。用这几种方法来对一个元素使用多重变形。l本节主要通过以下两个示例来讲解多重变形操作：本节主要通过以下两个示例来讲解多重变形操作：【例例15-5】是一个对元素先移动，然后旋转，最后缩是一个对元素先移动，然后旋转，最后缩放的示例；放的示例；【例例15-6】是一个对元素先旋转，然后缩放，最

12、后移是一个对元素先旋转，然后缩放，最后移动的示例。动的示例。HTML5+CSS3网页设计基础教程第15章 变形处理第13页主要内容主要内容15.1 认识认识transform15.2 2D变形变形 15.3 3D变形变形15.4 变形矩阵变形矩阵15.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第15章 变形处理第14页15.3 3D变形变形l15.3.1 3D位移位移l15.3.2 3D旋转旋转l15.3.3 3D缩放缩放l15.3.4 3D变形兼容性变形兼容性l15.3.6 多重变形多重变形HTML5+CSS3网页设计基础教程第15章 变形处理第15页15.3.1 3D位移位

13、移l在在CSS3中，中，3D位移操作主要通过位移操作主要通过translateZ()和和translate3d()两个函数实现。其中，两个函数实现。其中，translate3d()函数使函数使一个元素在三维空间移动。其基本语法如下：一个元素在三维空间移动。其基本语法如下：translate3d(tx,ty,tz);l其中，各参数取值说明如下：其中，各参数取值说明如下：tx：代表横向坐标位移向量的长度；：代表横向坐标位移向量的长度；ty：代表纵向坐标位移向量的长度；：代表纵向坐标位移向量的长度；tz：代表：代表Z轴位移向量的长度。该值不能是一个百分比值，如果取轴位移向量的长度。该值不能是一个百分

14、比值，如果取值为百分比值，将被认为是无效值。值为百分比值，将被认为是无效值。HTML5+CSS3网页设计基础教程第15章 变形处理第16页15.3.2 3D旋转旋转l在三维变形中，可以让元素在任何轴上旋转。在三维变形中，可以让元素在任何轴上旋转。CSS3新增新增3个旋转函数：个旋转函数：rotateX()、rotateY()和和rotateZ()。rotateX()函数允许一个元素围绕函数允许一个元素围绕X轴轴旋转；旋转；rotateY()函数允许一个元素围绕函数允许一个元素围绕Y轴旋转；轴旋转；rotateZ()函数允许一个元素围绕函数允许一个元素围绕Z轴旋转。轴旋转。lrotateX(a)

15、lrotateY(a)lrotateZ(a)HTML5+CSS3网页设计基础教程第15章 变形处理第17页15.3.3 3D缩放缩放lCSS3中，中，3D缩放处理主要通过缩放处理主要通过scaleZ()和和scale3d()两个两个函数来实现。当函数来实现。当scale3d()中中X轴和轴和Y轴同时为轴同时为1，即，即scale3d(1,1,sz)，其效果等同于，其效果等同于scaleZ(sz)。通过使用。通过使用3D缩放函数，可以让元素在缩放函数，可以让元素在Z轴上按比例缩放。默认值为，轴上按比例缩放。默认值为，当值大于时，元素放大，反之小于且大于当值大于时，元素放大，反之小于且大于0.01

16、时，元时，元素缩小。素缩小。lscale3d()函数的使用语法如下：函数的使用语法如下：scale3d(sx,sy,sz)l其中，各参数作用如下。其中，各参数作用如下。sx：横向缩放比例；：横向缩放比例；sy：纵向缩放比例；：纵向缩放比例；sz：Z轴缩放比例；轴缩放比例；HTML5+CSS3网页设计基础教程第15章 变形处理第18页15.3.4 3D变形兼容性变形兼容性l3D变形在实际使用这时同样需要添加各浏览器的私有属变形在实际使用这时同样需要添加各浏览器的私有属性，并且有个别属性在某些主流浏览器中并未得到很好的性，并且有个别属性在某些主流浏览器中并未得到很好的支持：支持：IE10+中中3D

17、变形部分属性未得到很好的支持；变形部分属性未得到很好的支持；Firefox10.0至至Firefox15.0版本的浏览器，在使用版本的浏览器，在使用3D变形时需要变形时需要添加私有属性添加私有属性-moz-，但从，但从Firefox16.0+版本开始无需添加浏览器版本开始无需添加浏览器私有属性；私有属性；Chrome12.0+版本中使用版本中使用3D变形时需要添加私有属性变形时需要添加私有属性-webkit-；Safari4.0+版本中使用版本中使用3D变形时需要添加私有属性变形时需要添加私有属性-webkit-；Opera15.0+版本才开始支持版本才开始支持3D变形，使用之里需要添加私有属

18、变形，使用之里需要添加私有属性性-webkit-；移动设备中移动设备中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+都支持都支持3D变形，但在使用时需要添加私有属性变形，但在使用时需要添加私有属性-webkit-；Firefox for Android19.0+支持支持3D变形，但无需添加浏变形，但无需添加浏览器私有属性。览器私有属性。HTML5+CSS3网页设计基础教程第15章 变形处理第19页15.3.6 多重变形多重变形l在在CSS3中，

19、不管是中，不管是2D变形还是变形还是3D变形，都可以使用多重变形，都可以使用多重变形，它们之间使用空格分隔，具体语法如下：变形，它们之间使用空格分隔，具体语法如下：transform:l其中，其中，transfrom-function是指是指CSS3中的任何变形函数。中的任何变形函数。HTML5+CSS3网页设计基础教程第15章 变形处理第20页主要内容主要内容15.1 认识认识transform15.2 2D变形变形 15.3 3D变形变形15.4 变形矩阵变形矩阵15.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第15章 变形处理第21页15.4 变形矩阵变形矩阵l15.4.

20、1 矩阵概述矩阵概述l15.4.2 变形与坐标系统变形与坐标系统l15.4.3 2D矩阵变形矩阵变形l15.4.4 3D矩阵变形矩阵变形l15.4.5 使用矩阵实现多重变形使用矩阵实现多重变形HTML5+CSS3网页设计基础教程第15章 变形处理第22页15.4.1 矩阵概述矩阵概述l矩阵是一个数学概念，代表一组数字、符号或表矩阵是一个数学概念，代表一组数字、符号或表达式的矩形阵列。在图形图像学中，矩阵被用在达式的矩形阵列。在图形图像学中，矩阵被用在2D屏幕上进行屏幕上进行3D图像的线性变换中。实际上，这图像的线性变换中。实际上，这种变换处理通过矩阵函数完成，种变换处理通过矩阵函数完成，mat

21、rix()函数允函数允许创建线性变换，许创建线性变换，matrix3d()函数允许使用函数允许使用CSS代码将三维投射到二维坐标中。变形处理就是将代码将三维投射到二维坐标中。变形处理就是将坐标系统中一个坐标点位置乘以一个变形矩阵即坐标系统中一个坐标点位置乘以一个变形矩阵即可。可。HTML5+CSS3网页设计基础教程第15章 变形处理第23页15.4.2 变形与坐标系统变形与坐标系统lWeb中，每一个页面都是一个坐标系统，原点在中，每一个页面都是一个坐标系统，原点在页面的左上角页面的左上角(0,0)，其中，其中，X轴方向为从左到右，轴方向为从左到右，Y轴方向从上到下，轴方向从上到下，Z轴则是页面

22、观察者与页面之轴则是页面观察者与页面之间的距离。间的距离。Z坐标值越大代表观察者离页面的距坐标值越大代表观察者离页面的距离越近，反之越远。离越近，反之越远。l当对一个对象做变形处理时，首先建立本地坐标当对一个对象做变形处理时，首先建立本地坐标系统。默认情况下，本地坐标系统中的原点在对系统。默认情况下，本地坐标系统中的原点在对象正中央。象正中央。l可以通过在样式代码中使用可以通过在样式代码中使用transform-origin属属性来调整坐标原点。在本地坐标系统中对任何坐性来调整坐标原点。在本地坐标系统中对任何坐标点进行的变形都是参考坐标原点进行的。标点进行的变形都是参考坐标原点进行的。HTML

23、5+CSS3网页设计基础教程第15章 变形处理第24页15.4.3 2D矩阵变形矩阵变形l浏览器会自动将二维变形矩阵与一个数组浏览器会自动将二维变形矩阵与一个数组x,y,1相乘，其相乘，其中中x值和值和y值分别为一个坐标点在值分别为一个坐标点在X轴方向上的位置与轴方向上的位置与Y轴轴方向上的位置。为了计算经过变形处理后的坐标点位置，方向上的位置。为了计算经过变形处理后的坐标点位置，将该数组和将该数组和2D变形矩阵相乘，如图变形矩阵相乘，如图1所示。每一种变形处所示。每一种变形处理都有特定的理都有特定的2D变形矩阵。例如，一个平移用变形矩阵。例如，一个平移用2D变形矩变形矩阵如图阵如图2所示。所

24、示。l其中，其中，tx和和ty代表坐标原点被平移后新的坐标点位置。可代表坐标原点被平移后新的坐标点位置。可以使用数组以使用数组1 0 0 1 tx ty来代替它，这个数组将被用于来代替它，这个数组将被用于matrix函数中，代码如下：函数中，代码如下：#mydiv transform:matrix(1,0,0,1,tx,ty);HTML5+CSS3网页设计基础教程第15章 变形处理第25页15.4.4 3D矩阵变形矩阵变形l下面是一个处理下面是一个处理3D缩放变形时所用的缩放变形时所用的44矩阵。矩阵。l其中，其中，sx、sy和和sz代表代表X、Y、Z轴方向上的缩放轴方向上的缩放倍数。如果使用

25、倍数。如果使用matrix3d函数，代码为：函数，代码为：transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)。HTML5+CSS3网页设计基础教程第15章 变形处理第26页15.4.5 使用矩阵实现多重变形使用矩阵实现多重变形l旋转变形使用矩阵为旋转变形使用矩阵为cos(a)sin(a)-sin(a)cos(a)，a代表一个角度。为了放大元素，这里代表一个角度。为了放大元素，这里使用矩阵使用矩阵sx 0 0 sy 0 0。为了使用多种变形，首。为了使用多种变形，首先将这两个矩阵相乘：先将这两个矩阵相乘：HTML5+CSS3网页设计基础教

26、程第15章 变形处理第27页15.4.5 使用矩阵实现多重变形使用矩阵实现多重变形l将【例将【例15-12】中的】中的div元素的元素的tranform样式属性样式属性值改为：值改为：transform:matrix(1.0606,1.0606,-1.0606,1.0606,0,1);l如果对一个如果对一个(298,110)坐标点使用经过计算后的变坐标点使用经过计算后的变形矩阵，新的坐标点为形矩阵，新的坐标点为(199,393,432.725)，计算，计算过程如图所示。过程如图所示。HTML5+CSS3网页设计基础教程第15章 变形处理第28页主要内容主要内容15.1 认识认识transfor

27、m15.2 2D变形变形 15.3 3D变形变形15.4 变形矩阵变形矩阵15.5 本章小结本章小结 HTML5+CSS3网页设计基础教程第15章 变形处理第29页15.5 本章小结本章小结 l在这章中，主要分两个部分介绍了在这章中，主要分两个部分介绍了CSS3中的变中的变形属性，第一部分是二维空间的变形，第二部分形属性，第一部分是二维空间的变形，第二部分是三维空间的变形。二维空间中的变形主要向大是三维空间的变形。二维空间中的变形主要向大家介绍了旋转家介绍了旋转rotate()、倾斜、倾斜skew()、位移、位移translate()、缩放、缩放scale()和和2D矩阵等函数功能。矩阵等函数功能。三维空间的变形主要向大家介绍了三维空间的变形主要向大家介绍了3D空间的几个空间的几个重要概念，比如重要概念，比如perspective、perspective-origin和和backface-visibility等，以及详细介绍了等，以及详细介绍了3D空间中的空间中的3D旋转、旋转、3D位移、位移、3D缩放和缩放和3D矩阵。矩阵。通过本章节的学习，大家对通过本章节的学习，大家对CSS3的变形会有一的变形会有一个较深的了解。个较深的了解。