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；（默認值）