[css] transform

demo

 

matrix(n,n,n,n,n,n)     定义 2D 转换，使用六个值的矩阵。     
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)     定义 3D 转换，使用 16 个值的 4x4 矩阵。     
translate(x,y)     定义 2D 转换。     
translate3d(x,y,z)     定义 3D 转换。     
translateX(x)     定义转换，只是用 X 轴的值。     
translateY(y)     定义转换，只是用 Y 轴的值。     
translateZ(z)     定义 3D 转换，只是用 Z 轴的值。     
scale(x,y)     定义 2D 缩放转换。     
scale3d(x,y,z)     定义 3D 缩放转换。     
scaleX(x)     通过设置 X 轴的值来定义缩放转换。     
scaleY(y)     通过设置 Y 轴的值来定义缩放转换。     
scaleZ(z)     通过设置 Z 轴的值来定义 3D 缩放转换。     
rotate(angle)     定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)     定义 3D 旋转。   

rotate3d()中取值说明：
    x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
    y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
    z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
    a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。 

     rotateX(a)函数功能等同于rotate3d(1,0,0,a)
    rotateY(a)函数功能等同于rotate3d(0,1,0,a)
    rotateZ(a)函数功能等同于rotate3d(0,0,1,a)

rotateX(angle)     定义沿着 X 轴的 3D 旋转。     
rotateY(angle)     定义沿着 Y 轴的 3D 旋转。     
rotateZ(angle)     定义沿着 Z 轴的 3D 旋转。     
skew(x-angle,y-angle)     定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)     定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)     定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)     为 3D 转换元素定义透视视图。


2D Transform Functions：
matrix()：
    以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate()：
    指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translatex()：
    指定对象X轴（水平方向）的平移
translatey()：
    指定对象Y轴（垂直方向）的平移
rotate()：
    指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义
scale()：
    指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scalex()：
    指定对象X轴的（水平方向）缩放
scaley()：
    指定对象Y轴的（垂直方向）缩放
skew()：
    指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx()：
    指定对象X轴的（水平方向）扭曲
skewy()：
    指定对象Y轴的（垂直方向）扭曲


3D Transform Functions：
matrix3d()：
    以一个4x4矩阵的形式指定一个3D变换
translate3d()：
    指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
translatez()：
    指定对象Z轴的平移
rotate3d()：    指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略
rotatex()：
    指定对象在x轴上的旋转角度
rotatey()：
    指定对象在y轴上的旋转角度
rotatez()：
    指定对象在z轴上的旋转角度
scale3d()：
    指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
scalez()：
    指定对象的z轴缩放
perspective()：
    指定透视距离

 

transform-origin：[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]
其实就是设置基点位置
<percentage>：
    用百分比指定坐标值。可以为负值。
<length>：
    用长度值指定坐标值。可以为负值。
left：
    指定原点的横坐标为left
center：
    指定原点的横坐标为center
right：
    指定原点的横坐标为right
top：
    指定原点的纵坐标为top
center：
    指定原点的纵坐标为center
bottom：
    指定原点的纵坐标为bottom

    设置或检索对象以某个原点进行转换。
    该属性提供2个参数值。
    如果提供两个，第一个用于横坐标，第二个用于纵坐标。
    如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。
    对应的脚本特性为transformOrigin。

 

transform-style：flat | preserve-3d
flat : 指定子元素位于此元素所在平面内
preserve-3d ：指定子元素定位在三维空间内
    
指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。
    当该属性值为「preserve-3d」时，元素将会创建局部堆叠上下文。
    决定一个变换元素看起来是处在三维空间还是平面内，需要该元素的父元素上定义 <' transform-style '> 属性。
    对应的脚本特性为transformStyle。

 

perspective：none | <length>

指定观察者与「z=0」平面的距离，使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大，而「z<0」时则比正常小，大小程度由该属性的值决定。
    当该属性值为「非none」时，元素将会创建局部堆叠上下文。
    对应的脚本特性为perspective。

 

perspective-origin：[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]
指定透视点的位置。

 

 backface-visibility：visible | hidden
 指定元素背面面向用户时是否可见。
    决定一个元素背面面向用户时是否可见，需要直接在该元素上定义 <' backface-visibility '> 属性，而不能在其父元素上，因为该属性默认为不可继承。
    对应的脚本特性为backfaceVisibility。

 

translate()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

 

translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略