Transform.docx

Transform.docx

《Transform.docx》由会员分享，可在线阅读，更多相关《Transform.docx（11页珍藏版）》请在冰豆网上搜索。

Transform

Transform:

（css32D转换）

注意：

这些效果叠加时，中间用空格隔开

作用：

能够对元素进行移动、缩放、转动、拉长、拉伸

转换：

使元素改变形状、尺寸、位置的一种效果

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旋转，在参数中规定角度

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（）方法：

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

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倍，高度度转换为原始尺寸的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,20deg）围绕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%;bottom=100%;

如果只取一个值，表示垂直方向值不变（center）

1、topleft|lefttop等价于00|0%0%

2、top|topcenter|centertop等价于50%0

3、righttop|topright等价于100%0

4、left|leftcenter|centerleft等价于050%|0%50%

5、center|centercenter等价于50%50%（默认值）

6、right|rightcenter|centerright等价于100%50%

7、bottomleft|leftbottom等价于0100%|0%100%

8、bottom|bottomcenter|centerbottom等价于50%100%

9、bottomright|rightbottom等价于100%100%

Css33D转换

transform

向元素应用2D或3D转换

Transform-origin

允许你改变被转换元素的位置

Transform-style

规定被嵌套元素如何在3D空间中显示

perspective

规定3D元素的底部位置

Perspective-origin

规定3D元素的底部位置

Backface-visibility

定义元素在不面对屏幕时是否可见

Css3transform方法：

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矩阵

Transform-style:

规定如何在3D空间中呈现被嵌套的元素，该属性必须与transform属性一同使用。

该属性设置在父元素中

Transform-style:

flat|preserve-3d

flat

子元素将不保留其3D位置

所有子元素在2D平面呈现

Preserve-3d

子元素将保留其3D位置

Perspective:

Perspective:

number|none;

perspective属性定义3D元素距视图的距离，以像素计。

该属性允许您改变3D元素,查看3D元素的视图。

注意：

（1）当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。

（2）与perspective-origin属性一同使用该属性，这样就能改变3D元素的底部位置

（3）我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。

而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。

（perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。

）

number

元素距离视图的距离，以像素计

none

默认值。

与0相同。

不设置透视

Perspective-origin:

Perspective-origin:

x-axisy-axis;

定义3D元素所基于的X轴和Y轴。

该属性允许您改变3D元素的底部位置。

当为元素定义perspective-origin属性时，其子元素会获得透视效果，而不是元素本身。

（该属性必须与perspective属性一同使用，而且只影响3D转换元素）

注意：

为了指转换子元素变形的深度，perspective-origin属性必须定义父元素上。

通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。

换句话说，perspective-origin属性需要与perspective-origin属性结合起来使用，以便将视点移至元素的中心以外位置

x-axis

定义该视图在x轴上的位置，默认：

50%

可能的值：

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轴值越大时，元素也离观看者更近，从视觉上元素就变得更大；反之其值越小时，元素也离观看者更远，从视觉上元素就变得更小。

TranslateZ（）:

Transform:

translateZ（200px）;

Transform:

translateZ（-200px）;

使用translateZ（）函数可以让元素在Z轴进行位移，当其值为负值时，元素在Z轴越移越远，导致元素变得较小。

反之，当其值为正值时，元素在Z轴越移越近，导致元素变得较大。

ScaleZ（）:

默认值为1，当值大于1时，元素放大，反之小于1大于0.01时，元素缩小。

ScaleZ（-1）定义了一个原点在z轴的对称点

单独使用没有效果，需配合其他变形函数一起使用才会有效果

Transform:

scale（5）rotateX（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）;