景深
生活中的3d 區別於2d的地方
1、近大遠小 景深
程序中實現的方法 perspective 元素距離 視線的距離(物體和眼睛的距離越小,近大遠小的效果越明顯)
perspective: 1200px;(在父元素中使用)
transform:perspective(1200px) (在子元素中使用)
兩個都設置會發生衝突,建議只設置父元素,通常的數值在900-1200之間
如果當你的視線距離物體足夠遠的時候,基本上就不會有近大遠小的感覺
perspective-origin
觀察3d元素的(位置)角度
perspective-origin:center center (中心)
perspective-origin:left top (左上角)
perspective-origin:100% 100% (右下角)
3D
2d場景,在屏幕上水平和垂直的交叉線x軸和y軸
3d場景,在垂直於屏幕的方法,相對於3d多出個z軸
Z軸:靠近屏幕的方向是正向,遠離屏幕的方向是反向
實現3D場景
transform-style屬性
transform-style屬性是3D空間一個重要屬性,指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值:flat和preserve-3d
其中flat值爲默認值,表示所有子元素在2D平面呈現。preserve-3d表示所有子元素在3D空間中呈現。
也就是說,如果對一個元素設置了transform-style的值爲flat,則該元素的所有子元素都將被平展到該元素的2D平面中進行呈現。沿着X軸或Y軸方向旋轉該元素將導致位於正或負Z軸位置的子元素顯示在該元素的平面上,而不是它的前面或者後面。如果對一個元素設置了transform-style的值爲preserve-3d,它表示不執行平展操作,他的所有子元素位於3D空間中。
3D位移
CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數;
- translate3d(tx,ty,tz)
- ty:代表縱向座標位移向量的長度;
- tx:代表橫向座標位移向量的長度;
- tz:代表Z軸位移向量的長度。此值不能是一個百分比值,如果取值爲百分比值,將會認爲無效值。
- translateZ(t)
- 指的是Z軸的向量位移長度。
3D旋轉
CSS3中的3D旋轉主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數;
- rotateX(a)
- rotateX()函數指定一個元素圍繞X軸旋轉,旋轉的量被定義爲指定的角度;如果值爲正值,元素圍繞X軸順時針旋轉;反之,如果值爲負值,元素圍繞X軸逆時針旋轉。
- rotateY(a)
- rotateY()函數指定一個元素圍繞Y軸旋轉,旋轉的量被定義爲指定的角度;如果值爲正值,元素圍繞Y軸順時針旋轉;反之,如果值爲負值,元素圍繞Y軸逆時針旋轉。
- rotateZ(a)
- rotateZ()函數和其他兩個函數功能一樣的,區別在於rotateZ()函數指定一個元素圍繞Z軸旋轉
- rotate3d(x,y,z,a)(建議取值0或1)
- x:是一個0到1之間的數值,主要用來描述元素圍繞X軸旋轉的矢量值;
- y:是一個0到1之間的數值,主要用來描述元素圍繞Y軸旋轉的矢量值;
- z:是一個0到1之間的數值,主要用來描述元素圍繞Z軸旋轉的矢量值;
- a:是一個角度值,主要用來指定元素在3D空間旋轉的角度,如果其值爲正值,元素順時針旋轉,反之元素逆時針旋轉。
3D縮放
3D縮放:CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數;
簡介: CSS3 3D變形中的縮放主要有scaleZ()和scale3d()兩種函數,當scale3d()中X軸和Y軸同時爲1,即scale3d(1,1,sz),其效果等同於scaleZ(sz)。通過使用3D縮放函數,可以讓元素在Z軸上按比例縮放。默認值爲1,當值大於1時,元素放大,反之小於1大於0.01時,元素縮小
-
scale3d()
- sx:橫向縮放比例;
- sy:縱向縮放比例;
- sz:Z軸縮放比例;
-
scaleZ(s)
- s:指定元素每個點在Z軸的比例。
-
注:scaleZ()和scale3d()函數單獨使用時沒有任何效果,需要配合其他的變形函數一起使用纔會有效果