CSS3-3D技术

CSS3-3D技术

transform翻译成汉语具备"变换"或者"改变"的意思。

此属性具备很是强大的功能，好比能够实现元素的位移、拉伸或者旋转等效果，

最能体现transform 属性强大实力的是实现元素的3D变换效果。

 

 

 

 

 

transform  功能函数： 

1、位移translate

transform: translate(x , y)    2d

transform:translateX();

transform:translateY();

transform:translateZ(不能写百分比，只能写具体的数值);   3d

transform: translate3d(x , y , z);  3d

 

2、旋转rotate

transform: rotate();   2d

transform: rotateX();

transform: rotateY();

transform: rotateZ();  3d

transform: rotate3d(x,y,z,a);      3d

0 ：不旋转；1：旋转 ；   

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

a：是一个角度值，主要用来指定元素旋转的角度，正值顺时针旋转，负值逆时针旋转。

 

3、缩放scale

transform: scale3d(x , y , z);  3d

transform: scale(x,y)        2d

transform: scaleX();

transform: scaleY();

transform: scaleZ();    3d

 

4、设置空间transform-style

transform-style：flat；处在2D空间里   （默认值）

transform-style：preserve-3d；处在3D空间里

 

五、景深perspective

perspective:200px; （父元素）

transform:perspective(1200px) （在子元素中使用）

离屏幕多远的距离去观察元素，两个都设置会发生冲突，建议只设置父元素，一般的数值在900-1200之间，当视线距离物体足够远的时候，基本上就不会有近大远小的感受。

 

六、原点persnpective-origin

persnpective-origin：值1  值2；(父元素)

原点设置，基点位置，观察3d元素的（位置）角度。

值能够是px    %    left   top  right   bottom。

 

七、旋转元素的基点位置transform-origin

transform-origin：x y z； 设置旋转元素的基点位置，z 不能设置%；

transform-origin ：50% 50% 0；（默认值）