css3-2d和3d转换3d函数

2d转换的方法：

translate(x,y)作用：沿X,Y轴位移

参数-长度值：

可以是1-2个值

1个值表示沿X轴位移，两个值表示分别沿X轴，Y轴位移

取值:px  &  百分比（强调相对于元素本身大小计算）说明：允许负值，正值默认向右向下，负值向左向上

拆分单独定义：

translateX( 长度值 ) 沿X轴缩放

translateY( 长度值 ) 沿Y轴缩放

结合定位实现居中第三种方式demo：

父盒子{
    position:relative; 
}
子盒子{
    position:absolute; 
    left:50%; 
    top:50%; 
    //沿着自身原来位置移动自身宽度、高度的一半 
    transform:translate(-50%,-50%); 
}

scale(x,y)作用:沿x,y轴缩放元素大小

参数-数值，表示缩放倍率（没有单位的数字）

可以是1-2个值

1个值，表示沿X轴，Y轴同时缩放

2个值 两个值表示分别沿X轴、Y轴缩放

取值-默认值为1 不放大也不缩小

使用0~1之间的值 【缩小】元素

使用大于1的值【放大】元素。

允许负值——负值表示先反转再缩放

单独定义：

scaleX( 缩放倍率 ) 沿X轴缩放

scaleY( 缩放倍率 ) 沿Y轴缩放

skew(x,y)作用：沿x，y轴 倾斜元素

参数-角度（单位通常使用deg）

skew(x,y) 水平方向和垂直方向同时倾斜

1个值沿X轴方向的斜切

2个值分别表示沿X,Y轴方向的斜切

单独定义：

skewX(x)仅水平方向（X轴）倾斜

skewY(Y)仅垂直方向（Y轴）倾斜

rotate( angle )作用：定义2d旋转

参数：角度（单位通常使用deg）

取值-角度，单位deg

正数表示顺时针旋转，负数表示逆时针旋转

转换基点：transform-origin 定义转换原点（基点）

transform-origin：x轴位置 y轴位置 Z轴位置（默认0）;
空格隔开的两个值时，分别表示x轴，Y轴位置
一个值时，另一个值默认center

取值-px (相对于元素本身左上角为0.0点的坐标位置) / 百分比 （元素自身大小的百分比）

关键字：

水平：left center right

垂直：top center bottom

3d转换：

3d坐标轴：

3d转换的方法

rotateX(angle)作用：沿着 X 轴旋转

取值-角度：单位deg

正值顺时针，负值逆时针

perspective属性

表示视距（观察者距离视图的距离）

作用：使子元素以透视效果显示（近大远小）

取值：

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

none（0）默认值。表示没有透视效果透视。

值越小透视效果越明显

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

rotateY(angle)作用：沿着 y 轴旋转

取值-角度：单位deg

正值顺时针，负值逆时针

rotateZ(angle)作用：沿着 Z 轴旋转

取值-角度：单位deg

正值顺时针，负值逆时针

translateZ( z )作用：沿Z轴位移

取值-px 不允许百分比值

scaleZ( z )作用：沿Z轴缩放

取值-默认值为1

使用0~1之间的值【缩小】元素，

使用超过1的值【放大】元素

transform-style作用定义嵌套子元素是否以3d空间呈现

取值：

flat 子元素在2D平面呈现。

preserve-3d 子元素以3D空间呈现

注：通常加给父元素   只对3d转换的元素有效

transform多组值 简写

多重转换 —— 空格隔开

transform:rotateY(80deg) scaleZ(2);

3d函数：

tranlate3d(X,Y,Z)作用：定义元素在X,Y,Z轴上的平移

例：
translate3d(100px,200px,300px) 表示分别沿x轴平移100px, y轴平移200px,Z轴平移300px

scale3d(x,y,z) 作用：定义元素在X,Y,Z轴上的缩放

例： 
scale3d(2,1.5,0.5) 表示分别沿x轴放大2倍，y轴放大1.5倍，Z轴缩小0.5

rotate3d(tx,ty,tz,角度)作用：定义元素在X,Y,Z轴上的旋转

tx,ty,tz 矢量值

其中两上为0，另一个值只有0与非0的区别

rotate3d(0,0,1,30deg) 沿Z轴旋转30deg 相当于 rotateZ(30deg)
rotate3d(1,0,0,30deg) 沿X轴旋转30deg 相当于 rotateX(30deg)
rotate3d(0,1,0,30deg) 沿y轴旋转30deg 相当于 rotateY(30deg)

其中两个不为0，tx,ty,tz相当于倍率

rotate3d(1,1,1,30deg) 沿X轴旋转30deg 沿y轴旋转30deg 沿z轴旋转30deg 
rotate3d(0.5,1,0,30deg) 沿X轴旋转15deg 沿y轴旋转30deg