《HTML5+CSS3网页设计基础教程第15章 变形处理》由会员分享，可在线阅读，更多相关《HTML5+CSS3网页设计基础教程第15章 变形处理（29页珍藏版）》请在金锄头文库上搜索。
1、第1页,第15章 变形处理,本章概述 本章的学习目标 主要内容,第2页,本章概述,在CSS3中，可以使用transform功能实现文字或图像的旋转、缩放、倾斜和移动4种类型的变形处理。在变形处理中，会使用到deg这个单位，这是一种角度单位。旋转操作通过使用rotate方法来实现。缩放操作通过使用scale方法来实现。倾斜操作通过使用skew方法来实现。移动操作通过使用translate方法来实现。在使用transform功能实现变形操作时，可以指定变形的基准点。本章主要来介绍这些内容。,第3页,本章的学习目标,掌握CSS3中transform功能的使用方法，能够使用transform功能来实现
2、文字或图像的旋转、缩放、倾斜和移动的变形效果。 能够将旋转、缩放、倾斜和移动这4种变形效果结合使用，并知道使用的先后顺序不同，页面显示结果会有什么样的区别。 掌握3D变形功能的概念和实现方法。 掌握变形矩阵的基本概念和使用方法。,第4页,主要内容,15.1 认识transform 15.2 2D变形 15.3 3D变形 15.4 变形矩阵 15.5 本章小结,第5页,15.1 认识transform,在CSS3中，使用transform属性来实现文字或图像的旋转、缩放、倾斜、移动这4种类型的变形处理。,第6页,主要内容,15.1 认识transform 15.2 2D变形 15.3 3D变形
3、15.4 变形矩阵 15.5 本章小结,第7页,15.2 2D变形,15.2.1 旋转 15.2.2 缩放 15.2.3 移动 15.2.4 扭曲 15.2.5 复杂变形,第8页,15.2.1 旋转,旋转通过rotate方法实现，使用格式如下： rotate(); 通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg);。,第9页
4、,15.2.2 缩放,缩放scale具有3种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。下面具体来看看这3种情况具体使用方法： transform:scale(2,1.5); /水平方向放大2倍，垂直方向放大1.5倍 transform:scaleX(2); /水平方向放大2倍 transform:scaleY(2); /垂直
5、方向放大2倍,第10页,15.2.3 移动,文字或图像的移动通过translate方法实现，和缩放类似，也分为3种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），具体使用方法如下： transform:translate(100px,20px); /水平方向移动100像素，垂直方向移动20像素 transform:translateX(100px); /水平方向移动100像素 transform:translateY(20px); /垂直方向移动
6、20像素,第11页,15.2.4 扭曲,扭曲，有时候也称为倾斜操作，通过skew方法实现。和translate、scale一样，skew方法也具有3种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形），具体使用语法格式如下： transform:skew(30deg,10deg); /水平和垂直方向各扭曲30度、10度 transform:skewX(30deg); /水平方向扭曲30度 transform:skewY(10de
7、g);/垂直方向扭曲10度,第12页,15.2.5 复杂变形,上一节介绍了使用transform对元素进行旋转、缩放、移动和扭曲的操作，本节介绍如何综合使用这几种方法来对一个元素使用多重变形。 本节主要通过以下两个示例来讲解多重变形操作： 【例15-5】是一个对元素先移动，然后旋转，最后缩放的示例； 【例15-6】是一个对元素先旋转，然后缩放，最后移动的示例。,第13页,主要内容,15.1 认识transform 15.2 2D变形 15.3 3D变形 15.4 变形矩阵 15.5 本章小结,第14页,15.3 3D变形,15.3.1 3D位移 15.3.2 3D旋转 15.3.3 3D缩放
8、15.3.4 3D变形兼容性 15.3.6 多重变形,第15页,15.3.1 3D位移,在CSS3中，3D位移操作主要通过translateZ()和translate3d()两个函数实现。其中，translate3d()函数使一个元素在三维空间移动。其基本语法如下： translate3d(tx,ty,tz); 其中，各参数取值说明如下： tx：代表横向坐标位移向量的长度； ty：代表纵向坐标位移向量的长度； tz：代表Z轴位移向量的长度。该值不能是一个百分比值，如果取值为百分比值，将被认为是无效值。,第16页,15.3.2 3D旋转,在三维变形中，可以让元素在任何轴上旋转。CSS3新增3个旋
9、转函数：rotateX()、rotateY()和rotateZ()。rotateX()函数允许一个元素围绕X轴旋转；rotateY()函数允许一个元素围绕Y轴旋转；rotateZ()函数允许一个元素围绕Z轴旋转。 rotateX(a) rotateY(a) rotateZ(a),第17页,15.3.3 3D缩放,CSS3中，3D缩放处理主要通过scaleZ()和scale3d()两个函数来实现。当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为，当值大于时，元素放大，反之小于
10、且大于0.01时，元素缩小。 scale3d()函数的使用语法如下： scale3d(sx,sy,sz) 其中，各参数作用如下。 sx：横向缩放比例； sy：纵向缩放比例； sz：Z轴缩放比例；,第18页,15.3.4 3D变形兼容性,3D变形在实际使用这时同样需要添加各浏览器的私有属性，并且有个别属性在某些主流浏览器中并未得到很好的支持： IE10+中3D变形部分属性未得到很好的支持； Firefox10.0至Firefox15.0版本的浏览器，在使用3D变形时需要添加私有属性-moz-，但从Firefox16.0+版本开始无需添加浏览器私有属性； Chrome12.0+版本中使用3D变形时
11、需要添加私有属性-webkit-； Safari4.0+版本中使用3D变形时需要添加私有属性-webkit-； Opera15.0+版本才开始支持3D变形，使用之里需要添加私有属性-webkit-； 移动设备中iOS Safari3.2+、Android Browser3.0+、Blackberry Browser7.0+、Opera Mobile14.0+、Chrome for Android25.0+都支持3D变形，但在使用时需要添加私有属性-webkit-；Firefox for Android19.0+支持3D变形，但无需添加浏览器私有属性。,第19页,15.3.6 多重变形,在CSS
12、3中，不管是2D变形还是3D变形，都可以使用多重变形，它们之间使用空格分隔，具体语法如下： transform: 其中，transfrom-function是指CSS3中的任何变形函数。,第20页,主要内容,15.1 认识transform 15.2 2D变形 15.3 3D变形 15.4 变形矩阵 15.5 本章小结,第21页,15.4 变形矩阵,15.4.1 矩阵概述 15.4.2 变形与坐标系统 15.4.3 2D矩阵变形 15.4.4 3D矩阵变形 15.4.5 使用矩阵实现多重变形,第22页,15.4.1 矩阵概述,矩阵是一个数学概念，代表一组数字、符号或表达式的矩形阵列。在图形图像
13、学中，矩阵被用在2D屏幕上进行3D图像的线性变换中。实际上，这种变换处理通过矩阵函数完成，matrix()函数允许创建线性变换，matrix3d()函数允许使用CSS代码将三维投射到二维坐标中。变形处理就是将坐标系统中一个坐标点位置乘以一个变形矩阵即可。,第23页,15.4.2 变形与坐标系统,Web中，每一个页面都是一个坐标系统，原点在页面的左上角(0,0)，其中，X轴方向为从左到右，Y轴方向从上到下，Z轴则是页面观察者与页面之间的距离。Z坐标值越大代表观察者离页面的距离越近，反之越远。 当对一个对象做变形处理时，首先建立本地坐标系统。默认情况下，本地坐标系统中的原点在对象正中央。 可以通过
14、在样式代码中使用transform-origin属性来调整坐标原点。在本地坐标系统中对任何坐标点进行的变形都是参考坐标原点进行的。,第24页,15.4.3 2D矩阵变形,浏览器会自动将二维变形矩阵与一个数组x,y,1相乘，其中x值和y值分别为一个坐标点在X轴方向上的位置与Y轴方向上的位置。为了计算经过变形处理后的坐标点位置，将该数组和2D变形矩阵相乘，如图1所示。每一种变形处理都有特定的2D变形矩阵。例如，一个平移用2D变形矩阵如图2所示。 其中，tx和ty代表坐标原点被平移后新的坐标点位置。可以使用数组1 0 0 1 tx ty来代替它，这个数组将被用于matrix函数中，代码如下： #my
15、div transform:matrix(1,0,0,1,tx,ty);,第25页,15.4.4 3D矩阵变形,下面是一个处理3D缩放变形时所用的44矩阵。 其中，sx、sy和sz代表X、Y、Z轴方向上的缩放倍数。如果使用matrix3d函数，代码为： transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1)。,第26页,15.4.5 使用矩阵实现多重变形,旋转变形使用矩阵为cos(a) sin(a) -sin(a) cos(a)，a代表一个角度。为了放大元素，这里使用矩阵sx 0 0 sy 0 0。为了使用多种变形，首先将这两个矩阵相乘：,
16、第27页,15.4.5 使用矩阵实现多重变形,将【例15-12】中的div元素的tranform样式属性值改为： transform:matrix(1.0606, 1.0606, -1.0606, 1.0606, 0, 1); 如果对一个(298,110)坐标点使用经过计算后的变形矩阵，新的坐标点为(199,393,432.725)，计算过程如图所示。,第28页,主要内容,15.1 认识transform 15.2 2D变形 15.3 3D变形 15.4 变形矩阵 15.5 本章小结,第29页,15.5 本章小结,在这章中，主要分两个部分介绍了CSS3中的变形属性，第一部分是二维空间的变形，第二部分是三维空间的变形。二维空间中的变形主要向大家介绍了旋转rotate()、倾斜skew()、位移translate()、缩放scale()和2D矩阵等函数功能。三维空间的变形主要向大家介绍了3D空间的几个重要概念，比如perspective、perspective-origin和backface-visibility等，以及详细介绍了3D空间中的
