HTML5+CSS3网页设计基础教程第15章 变形处理

HTML5+CSS3网页设计基础教程第15章变形处理第1页第15章变形处理本章概述本章的学习目标主要内容HTML5+CSS3网页设计基础教程第15章变形处理第2页本章概述在CSS3中，可以使用transform功能实现文字或图像的旋转、缩放、倾斜和移动4种类型的变形处理。在变形处理中，会使用到deg这个单位，这是一种角度单位。旋转操作通过使用rotate方法来实现。缩放操作通过使用scale方法来实现。倾斜操作通过使用skew方法来实现。移动操作通过使用translate方法来实现。在使用transform功能实现变形操作时，可以指定变形的基准点。本章主要来介绍这些内容。HTML5+CSS3网页设计基础教程第15章变形处理第3页本章的学习目标掌握CSS3中transform功能的使用方法，能够使用transform功能来实现文字或图像的旋转、缩放、倾斜和移动的变形效果。能够将旋转、缩放、倾斜和移动这4种变形效果结合使用，并知道使用的先后顺序不同，页面显示结果会有什么样的区别。掌握3D变形功能的概念和实现方法。掌握变形矩阵的基本概念和使用方法。HTML5+CSS3网页设计基础教程第15章变形处理第4页主要内容15.1认识transform15.22D变形15.33D变形15.4变形矩阵15.5本章小结HTML5+CSS3网页设计基础教程第15章变形处理第5页15.1认识transform在CSS3中，使用transform属性来实现文字或图像的旋转、缩放、倾斜、移动这4种类型的变形处理。HTML5+CSS3网页设计基础教程第15章变形处理第6页主要内容15.1认识transform15.22D变形15.33D变形15.4变形矩阵15.5本章小结HTML5+CSS3网页设计基础教程第15章变形处理第7页15.22D变形15.2.1旋转15.2.2缩放15.2.3移动15.2.4扭曲15.2.5复杂变形HTML5+CSS3网页设计基础教程第15章变形处理第8页15.2.1旋转旋转通过rotate方法实现，使用格式如下：rotate(angle);通过指定的角度参数对原元素指定一个2Drotation（2D旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg);。HTML5+CSS3网页设计基础教程第15章变形处理第9页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);//垂直方向放大2倍HTML5+CSS3网页设计基础教程第15章变形处理第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);//垂直方向移动20像素HTML5+CSS3网页设计基础教程第15章变形处理第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(10deg);//垂直方向扭曲10度HTML5+CSS3网页设计基础教程第15章变形处理第12页15.2.5复杂变形上一节介绍了使用transform对元素进行旋转、缩放、移动和扭曲的操作，本节介绍如何综合使用这几种方法来对一个元素使用多重变形。本节主要通过以下两个示例来讲解多重变形操作：►【例15-5】是一个对元素先移动，然后旋转，最后缩放的示例；►【例15-6】是一个对元素先旋转，然后缩放，最后移动的示例。HTML5+CSS3网页设计基础教程第15章变形处理第13页主要内容15.1认识transform15.22D变形15.33D变形15.4变形矩阵15.5本章小结HTML5+CSS3网页设计基础教程第15章变形处理第14页15.33D变形15.3.13D位移15.3.23D旋转15.3.33D缩放15.3.43D变形兼容性15.3.6多重变形HTML5+CSS3网页设计基础教程第15章变形处理第15页15.3.13D位移在CSS3中，3D位移操作主要通过translateZ()和translate3d()两个函数实现。其中，translate3d()函数使一个元素在三维空间移动。其基本语法如下：translate3d(tx,ty,tz);其中，各参数取值说明如下：►tx：代表横向坐标位移向量的长度；►ty：代表纵向坐标位移向量的长度；►tz：代表Z轴位移向量的长度。该值不能是一个百分比值，如果取值为百分比值，将被认为是无效值。HTML5+CSS3网页设计基础教程第15章变形处理第16页15.3.23D旋转在三维变形中，可以让元素在任何轴上旋转。CSS3新增3个旋转函数：rotateX()、rotateY()和rotateZ()。rotateX()函数允许一个元素围绕X轴旋转；rotateY()函数允许一个元素围绕Y轴旋转；rotateZ()函数允许一个元素围绕Z轴旋转。rotateX(a)rotateY(a)rotateZ(a)HTML5+CSS3网页设计基础教程第15章变形处理第17页15.3.33D缩放CSS3中，3D缩放处理主要通过scaleZ()和scale3d()两个函数来实现。当scale3d()中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)。通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为１，当值大于１时，元素放大，反之小于１且大于0.01时，元素缩小。scale3d()函数的使用语法如下：scale3d(sx,sy,sz)其中，各参数作用如下。►sx：横向缩放比例；►sy：纵向缩放比例；►sz：Z轴缩放比例；HTML5+CSS3网页设计基础教程第15章变形处理第18页15.3.43D变形兼容性3D变形在实际使用这时同样需要添加各浏览器的私有属性，并且有个别属性在某些主流浏览器中并未得到很好的支持：►IE10+中3D变形部分属性未得到很好的支持；►Firefox10.0至Firefox15.0版本的浏览器，在使用3D变形时需要添加私有属性-moz-，但从Firefox16.0+版本开始无需添加浏览器私有属性；►Chrome12.0+版本中使用3D变形时需要添加私有属性-webkit-；►Safari4.0+版本中使用3D变形时需要添加私有属性-webkit-；►Opera15.0+版本才开始支持3D变形，使用之里需要添加私有属性-webkit-；►移动设备中iOSSafari3.2+、AndroidBrowser3.0+、BlackberryBrowser7.0+、OperaMobile14.0+、ChromeforAndroid25.0+都支持3D变形，但在使用时需要添加私有属性-webkit-；FirefoxforAndroid19.0+支持3D变形，但无需添加浏览器私有属性。HTML5+CSS3网页设计基础教程第15章变形处理第19页15.3.6多重变形在CSS3中，不管是2D变形还是3D变形，都可以使用多重变形，它们之间使用空格分隔，具体语法如下：transform:transform-functiontransform-function其中，transfrom-function是指CSS3中的任何变形函数。HTML5+CSS3网页设计基础教程第15章变形处理第20页主要内容15.1认识transform15.22D变形15.33D变形15.4变形矩阵15.5本章小结HTML5+CSS3网页设计基础教程第15章变形处理第21页15.4变形矩阵15.4.1矩阵概述15.4.2变形与坐标系统15.4.32D矩阵变形15.4.43D矩阵变形15.4.5使用矩阵实现多重变形HTML5+CSS3网页设计基础教程第15章变形处理第22页15.4.1矩阵概述矩阵是一个数学概念，代表一组数字、符号或表达式的矩形阵列。在图形图像学中，矩阵被用在2D屏幕上进行3D图像的线性变换中。实际上，这种变换处理通过矩阵函数完成，matrix()函数允许创建线性变换，matrix3d()函数允许使用CSS代码将三维投射到二维坐标中。变形处理就是将坐标系统中一个坐标点位置乘以一个变形矩阵即可。HTML5+CSS3网页设计基础教程第15章变形处理第23页15.4.2变形与坐标系统Web中，每一个页面都是一个坐标系统，原点在页面的左上角(0,0)，其中，X轴方向为从左到右，Y轴方向从上到下，Z轴则是页面观察者与页面之间的距离。Z坐标值越大代表观察者离页面的距离越近，反之越远。当对一个对象做变形处理时，首先建立本地坐标系统。默认情况下，本地坐标系统中的原点在对象正中央。可以通过在样式代码中使用transform-origin属性来调整坐标原点。在本地坐标系统中对任何坐标点进行的变形都是参考坐标原点进行的。HTML5+CSS3网页设计基础教程第15章变形处理第24页15.4.32D矩阵变形浏览器会自动将二维变形矩阵与一个数组[x,y,1]相乘，其中x值和y值分别为一个坐标点在X轴方向上的位置与Y轴方向上的位置。为了计算经过变形处理后的坐标点位置，将该数组和2D变形矩阵相乘，如图1所示。每一种变形处理都有特定的2D变形矩阵。例如，一个平移用2D变形矩阵如图2所示。其中，tx和ty代表坐标原点被平移后新的坐标点位置。可以使用数组[1001txty]来代替它，这个数组将被用于matrix函数中，代码如下：#mydiv{transform:matrix(1,0,0,1,tx,ty);}HTML5+CSS3网页设计基础教程第15章变形处理第25页15.4.43D矩阵变形下面是一个处理3D缩放变形时所用的4×4矩阵。其中，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)。HTML5+CSS3网页设计基础教程第15章变形处理第26页15.4.5使用矩阵实现多重变形旋转变形使用矩阵为[cos(a)sin