Transform解读Word文档下载推荐.docx

1、translateY（n）定义2D转换，沿着Y轴移动元素translate（x,y）定义2D转换，沿着X和Y轴移动元素rotate（angle）定义2D旋转，在参数中规定角度scaleX（n）定义2D缩放转换，改变元素的宽度scaleY（n）定义2D缩放转换，改变元素的高度scale（x,y）定义2D缩放转换，改变元素的宽度和高度skewX（angle）定义2D倾斜转换，沿着X轴skewY（angle）定义2D倾斜转换，沿着Y轴skew（x-angle,y-angle）定义2D倾斜转换，沿着X和Y轴matrix（n,n,n,n,n,n）定义2D转换，使用六个值得矩阵Translate（）方法：

2、通过translate（）方法，元素从其当前位置移动，根据给定的left（x坐标）和top（y坐标）位置.（参数为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据transform-origin进行改变基点）（1）translateX（n）:transform:translateX（100px）;（2）translateY（n）:translateY（20px）;（3）translate（x,y）:translate（100px,20px）;translate（100px）;认为和translateX（100px）等价。Rotate（angle）方法：通过rotate（）,元素顺时针

3、旋转给定的角度。允许负值，元素将逆时针旋转。rotate（30deg）; rotate（120deg）;rotate（-30deg）;Scale（）方法：通过scale（）方法，元素的尺寸会增加或减少，根据给定的宽度（X轴）和高度（Y轴）参数。（中心点：元素的中心位置，缩放基数为1，大于1就放大，小于1就缩小）（1）scaleX（）方法：scaleX（2）;值scaleX（2）把宽度转换为原始尺寸的2倍（2）scaleY（）方法：scaleY（2）;ScaleY（2）把高度度转换为原始尺寸的2倍（3）scale（）方法：scale（2,1.5）;值scale（2,2）把宽度转换为原始尺寸的2倍

4、，高度度转换为原始尺寸的2倍scale（2）与scale（2,2）等价Skew（angle）方法：通过skew（）方法，元素翻转给定的角度，根据给定的水平线（X轴）和垂直线（Y轴）参数（中心点：元素中心）（1）skewX（angle）:skewX（30deg）;值skewX（30deg）围绕X轴把元素翻转30度。（2）skewY（angle）:skewY（30deg）;值skewY（30deg）围绕Y轴把元素翻转30度。（3）skew（x-angle,y-angle）:skew（30deg,10deg）;值 skew（30deg,20deg） 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转

5、 20 度。skew（30deg）等价于skewX（30deg）.Matrix（）方法:Matrix（）方法把所有2D转换方法组合在一起。Matrix（）方法需要六个参数，包含数学函数，允许您：旋转，缩放，移动，倾斜元素。Transform-origin（x,y）方法：改变元素的基点位置。X和y的值：百分值，em，px，关键字。Left,center,right是水平方向取值：Left=0%;center=50%;right:100%;Top,center,bottom是垂直方向的取值：Top=0%;bottom=100%;如果只取一个值，表示垂直方向值不变（center）1、top left

6、 | left top 等价于 0 0 | 0% 0%2、top | top center | center top 等价于 50% 03、right top | top right 等价于 100% 04、left | left center | center left 等价于 0 50% | 0% 50%5、center | center center 等价于 50% 50%（默认值）6、right | right center | center right 等价于 100% 50%7、bottom left | left bottom 等价于 0 100% | 0% 100%8、bott

7、om | bottom center | center bottom 等价于 50% 100%9、bottom right | right bottom 等价于 100% 100%Css3 3D转换transform向元素应用2D或3D转换Transform-origin允许你改变被转换元素的位置Transform-style规定被嵌套元素如何在3D空间中显示perspective规定3D元素的底部位置Perspective-originBackface-visibility定义元素在不面对屏幕时是否可见Css3 transform方法：translateZ（z）定义3D转换，仅使用用于Z轴的

8、值translate3d（x,y,z）定义3D转换scaleZ（z）定义3D缩放转换，通过给定一个Z轴的值scale3d（x,y,z）定义3D缩放转换RotateX（angle）定义沿X轴的3D旋转RotateY（angle）定义沿Y轴的3D旋转RotateZ（angle）定义沿Z轴的3D旋转Rotate3d（x,y,z,angle）定义3D旋转Perspective（n）定义3D转换元素的透视视图Matrix3d（n,n,n,n,n,.）定义3D转换，使用16个值得4*4矩阵Transform-style:规定如何在3D空间中呈现被嵌套的元素，该属性必须与transform属性一同使用。该属

9、性设置在父元素中flat|preserve-3dflat子元素将不保留其3D位置所有子元素在2D平面呈现Preserve-3d子元素将保留其3D位置Perspective:number|none;perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素,查看 3D 元素的视图。（1）当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。（2）与perspective-origin属性一同使用该属性，这样就能改变3D元素的底部位置（3）我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决

10、定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。（perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。）number元素距离视图的距离，以像素计none默认值。与0相同。不设置透视Perspective-origin:x-axis y-axis;定义3D元素所基于的X轴和Y轴。该属性允许您改变3D元素的底部位置。当为元素定义perspective-origin属性时，其子元素会获得透视效果，而不是元素本身。（该属性必须与perspective属性一同使用，而且只影响3D转换元素）为了指转换子

11、元素变形的深度，perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective-origin属性结合起来使用，以便将视点移至元素的中心以外位置x-axis定义该视图在x轴上的位置，默认：50%可能的值：left,center,right,length,%Y-axis定义该视图在Y轴上的位置。默认：Top，center,bottom,length,%Backface-visibility:隐藏被旋转元素的背

12、面Backgace-visibility:visible|hidden;visible背面是可见的hidden背面是不可见的Translate3d（）translate（30px,30px,200px）;translate3d（30px,30px,-200px）;当z轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值越小时，元素也离观看者更远，从视觉上元素就变得更小。TranslateZ（）:translateZ（200px）;translateZ（-200px）;使用translateZ（）函数可以让元素在Z轴进行位移，当其值为负值时，元素在Z轴越移越远，导致元素变得较小。反之

13、，当其值为正值时，元素在Z轴越移越近，导致元素变得较大。ScaleZ（）:默认值为1，当值大于1时，元素放大，反之小于1大于0.01时，元素缩小。ScaleZ（-1）定义了一个原点在z轴的对称点单独使用没有效果，需配合其他变形函数一起使用才会有效果scale（5） rotateX（45deg）;scale（.25） rotateX（45deg）;RotateX（angle）,rotateY（angle）,rotateZ（angle）:围绕X/Y/Z轴旋转，angle为旋转的角度，可以是正值，顺时针旋转，可以是负值，逆时针旋转。Rotate3d（x,y,z,angle）: x：是一个0到之间的数值，主要用来描述元素围绕X轴旋转的矢量值；y：是一个到之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；z：是一个到之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。rotateX（45deg）;rotateY（45deg）;rotateZ（45deg）;rotate3d（.6,1,.6,45deg）;