HTML5+CSS开发 CSS3 3D转换 CH6-2 CSS3转换_3D转换.pptVIP

HTML5应用开发 CSS3转换_3D转换 第*页 3D位移 3D旋转 3D缩放 3D变形兼容性 多重变形 第*页 在CSS3中，3D位移操作主要通过translateZ()和translate3d()两个函数实现。其中，translate3d()函数使一个元素在三维空间移动。其基本语法如下： translate3d(tx,ty,tz); 其中，各参数取值说明如下： tx：代表横向坐标位移向量的长度； ty：代表纵向坐标位移向量的长度； tz：代表Z轴位移向量的长度。该值不能是一个百分比值，如果取值为百分比值，将被认为是无效值。 第*页 在三维变形中，可以让元素在任何轴上旋转。CSS3新增3个旋转函数：rotateX()、rotateY()和rotateZ()。rotateX()函数允许一个元素围绕X轴旋转；rotateY()函数允许一个元素围绕Y轴旋转；rotateZ()函数允许一个元素围绕Z轴旋转。 rotateX(a) rotateY(a) rotateZ(a) 第*页 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轴缩放比例； 第*页 3D变形在实际使用这时同样需要添加各浏览器的私有属性，并且有个别属性在某些主流浏览器中并未得到很好的支持： IE10+中3D变形部分属性未得到很好的支持； Firefox10.0至Firefox15.0版本的浏览器，在使用3D变形时需要添加私有属性-moz-，但从Firefox16.0+版本开始无需添加浏览器私有属性； Chrome12.0+版本中使用3D变形时需要添加私有属性-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变形，但无需添加浏览器私有属性。 第*页 在CSS3中，不管是2D变形还是3D变形，都可以使用多重变形，它们之间使用空格分隔，具体语法如下： transform: transform-function transform-function 其中，transfrom-function是指CSS3中的任何变形函数。 第*页 矩阵概述 变形与坐标系统 2D矩阵变形 3D矩阵变形 使用矩阵实现多重变形 第*页 矩阵是一个数学概念，代表一组数字、符号或表达式的矩形阵列。在图形图像学中，矩阵被用在2D屏幕上进行3D图像的线性变换中。实际上，这种变换处理通过矩阵函数完成，matrix()函数允许创建线性变换，matrix3d()函数允许使用CSS代码将三维投射到二维坐标中。变形处理就是将坐标系统中一个坐标点位置乘以一个变形矩阵即可。 第*页 Web中，每一个页面都是一个坐标系统，原点在页面的左上角(0,0)，其中，X轴方向为从左到右，Y轴方向从上到下，Z轴则是页面观察者与页面之间的距离。Z坐标值越大代表观察者离页面的距离越近，反之越远。 当对一个对象做变形处理时，首先建立本地坐标系统。默认情况下，本地坐标系统中的原点在对象正中央。 可以通过在样式代码中使用transform-origin属性来调整坐标原点。在本地坐标系统中对任何坐标点进行的变形都是参考坐标原点进行的。 第*页 浏览器会自动将二维变形矩阵与一个数组[x,y,1]相乘，其中x值和y值分别为一个坐标点在X轴方向上的位置与Y轴方向上的位置。为了计算经过变形处理后的坐标点位置，将该数组和2D变形矩阵相乘，如图1所示。每一种变形处理都有特定的2D变形矩阵。例如，一个平移用2D变形矩阵如图2所示。 其中，tx和ty代表坐标原点被平移后新的坐标点位置。可以使用数组[1 0 0 1 tx ty]来代替它，这个数组将被用于matrix函数中，代码如下： #mydiv {transform:matrix(1,0,0,1,tx,ty);} 第*页 下面是一个处理