跟大家講解下有關CSS3的3D轉換translate3d(x,y,z)函數_html/css_WEB-ITnose，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說CSS3的3D轉換translate3d(x,y,z)函數_html/css_WEB-ITnose，小編也收集到了有關CSS3的3D轉換translate3d(x,y,z)函數_html/css_WEB-ITnose的相關資料，希望大家看到了會喜歡。

CSS3的3D轉換translate3d(x,y,z)函數:translate3d(x,y,z)只是規定3D轉換的一種形式，更多相關內容可以參閱CSS3的3D轉換效果詳解介紹一章節。此函數用來規定指定元素在三維空間中的位移。語法結構:

translate3d(x,y,z)

參數解析:1.x:表示在x軸方向的位移。2.y:表示在y軸方向的位移。3.z:表示在z軸方向的位移。代碼實例:1.x軸方向的位移:

螞蟻部落 #box{ position:relative; height:150px; width:150px; margin-left:450px; margin-top:250px; padding:10px; border:1px solid black;}#inner{ width:100px; height:100px; text-align:center; line-height:100px; font-size:12px; position:absolute; border:1px solid black; background-color:yellow; transform:translate3d(0px,0,0); -ms-transform:translate3d(0px,0,0); -webkit-transform:translate3d(0px,0,0); -o-transform:translate3d(0px,0,0); -moz-transform:translate3d(0px,0,0);}table{ font-size:12px; width:500px; margin-left:220px; text-align:left; } .left{ text-align:right; width:150px;} 螞蟻部落 x軸位移: x: (0)

拖動按鈕可以實現x軸方向位移的演示，一切都很清楚。2.y軸方向的位移:

螞蟻部落 #box{ position:relative; height:150px; width:150px; margin-left:450px; margin-top:250px; padding:10px; border:1px solid black;}#inner{ width:100px; height:100px; text-align:center; line-height:100px; font-size:12px; position:absolute; border:1px solid black; background-color:yellow; transform:translate3d(0,0px,0); -ms-transform:translate3d(0,0px,0); -webkit-transform:translate3d(0,0px,0); -o-transform:translate3d(0,0px,0); -moz-transform:translate3d(0,0px,0); }table{ font-size:12px; width:500px; margin-left:220px; text-align:left; } .left{ text-align:right; width:150px;} 螞蟻部落 y軸位移: y: (0)

拖動按鈕可以實現Y軸方向位移的演示，一切都很清楚。3.z軸方向位移:

螞蟻部落 #box{ position:relative; height:150px; width:150px; margin-left:450px; margin-top:250px; padding:10px; border:1px solid black; -webkit-perspective:1200px; -moz-perspective:1200px; -ms-perspective:1200px; -o-perspective:1200px; perspective:1200px;}#inner{ width:100px; height:100px; text-align:center; line-height:100px; font-size:12px; position:absolute; border:1px solid black; background-color:yellow; transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); }table{ font-size:12px; width:500px; margin-left:220px; text-align:left; } .left{ text-align:right; width:150px;} 螞蟻部落 z軸位移: z: (0)

以上代碼演示了我們的效果，當值越大時。視覺效果越大，值越小時，視覺效果越小，這個也應該很好理解，離的越近自然就越大，離的越遠自然就看起來越小了。此代碼和上面兩個代碼最大的區別在于應用了perspective屬性，如果不使用此屬性，將看不到演示效果，因為3D的場景就不會有景深的Z軸，關于perspective屬性可以參閱CSS3的perspective屬性詳解一章節。 translate3d()函數也可以拆分單獨寫:

transform:translateX(10px); transform:translateY(20px); transform:translateZ(30px);

這里就不多介紹了，非常的簡單，一看就明白。

原文地址是:CSS3的3D轉換translate3d(x,y,z)函數一章節。

來源：php中文網