Transform解读.docx

1、Transform解读Transform:(css3 2D 转换)注意：这些效果叠加时，中间用空格隔开作用：能够对元素进行移动、缩放、转动、拉长、拉伸转换：使元素改变形状、尺寸、位置的一种效果Transform：2D的转换方法：translate()变动、位移rotate()旋转scale()比例skew()倾斜matrix()Transform:2D详细转换方法：translateX(n)定义2D转换，沿着X轴移动元素translateY(n)定义2D转换，沿着Y轴移动元素translate(x,y)定义2D转换，沿着X和Y轴移动元素rotate(angle)定义2D旋转，在参数中规定角度s

2、caleX(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()方法：通过translate()方法，元素从其当前位置移动，根据给定的left(x坐标)和top(y坐标)位置.(参数为负数时，反方向移动物体，其基点默认为元素中心点，也可以根据tr

3、ansform-origin进行改变基点)(1)translateX(n):transform:translateX(100px);(2)translateY(n):transform:translateY(20px);(3)translate(x,y):transform:translate(100px,20px);注意：translate(100px);认为和translateX(100px)等价。Rotate(angle)方法：通过rotate(),元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。Transform:rotate(30deg); Transform:rotate(1

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

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

6、g) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 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%;center=50%;botto

7、m=100%;如果只取一个值，表示垂直方向值不变（center）1、top left | 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 lef

8、t | left bottom 等价于 0 100% | 0% 100%8、bottom | 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-origin规定3D元素的底部位置Backface-visibility定义元素在不面

9、对屏幕时是否可见Css3 transform方法：translateZ(z)定义3D转换，仅使用用于Z轴的值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矩阵Transf

10、orm-style:规定如何在3D空间中呈现被嵌套的元素，该属性必须与transform属性一同使用。该属性设置在父元素中Transform-style:flat|preserve-3dflat子元素将不保留其3D位置所有子元素在2D平面呈现Preserve-3d子元素将保留其3D位置Perspective:Perspective:number|none;perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素,查看 3D 元素的视图。注意：（1）当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。（2）与perspec

11、tive-origin属性一同使用该属性，这样就能改变3D元素的底部位置（3）我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。（perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。）number元素距离视图的距离，以像素计none默认值。与0相同。不设置透视Perspective-origin:Perspective-origin:x-axis y-axis;定义3D元素所基于的X轴和Y轴。该属性允许您

12、改变3D元素的底部位置。当为元素定义perspective-origin属性时，其子元素会获得透视效果，而不是元素本身。(该属性必须与perspective属性一同使用，而且只影响3D转换元素)注意：为了指转换子元素变形的深度，perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective-origin属性结合起来使用，以便将视点移至元素的中心以外位置x-axis定义该视图在x轴上的位置，默认：50%可能

13、的值：left,center,right,length,%Y-axis定义该视图在Y轴上的位置。默认：50%可能的值：Top，center,bottom,length,%Backface-visibility:隐藏被旋转元素的背面Backgace-visibility:visible|hidden;visible背面是可见的hidden背面是不可见的Translate3d()transform:translate(30px,30px,200px);Transform:translate3d(30px,30px,-200px);当z轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值

14、越小时，元素也离观看者更远，从视觉上元素就变得更小。TranslateZ():Transform:translateZ(200px);Transform:translateZ(-200px);使用translateZ()函数可以让元素在Z轴进行位移，当其值为负值时，元素在Z轴越移越远，导致元素变得较小。反之，当其值为正值时，元素在Z轴越移越近，导致元素变得较大。ScaleZ():默认值为1，当值大于1时，元素放大，反之小于1大于0.01时，元素缩小。ScaleZ(-1)定义了一个原点在z轴的对称点单独使用没有效果，需配合其他变形函数一起使用才会有效果Transform:scale(5) rot

15、ateX(45deg);Transform: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空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。Transform:rotateX(45deg);Transform:rotateY(45deg);Transform:rotateZ(45deg);Transform:rotate3d(.6,1,.6,45deg);