CSS3轉換中的對象(div、ul li等)位移變換分為2d與3d兩種情況，2d即對象在平面中移動，3d即對象在空間中移動；2d的平移在前面的文章中已經介紹過，本篇介紹3d的情況，與2d不同的是多一個Z坐標軸。

由于 translate3d 要用到 translatez，所以在介紹它之前需要先了解 translatez。下面先介紹translatez和translate3d的語法規(guī)則，再分別分享一個應用實例。

一、translatez語法規(guī)則

translatez()

語法規(guī)則比較簡單，表示對象在Z軸的位移，例如 50px。

二、translate3d語法規(guī)則

translate3d(, , )

第一個：設置對象在X軸的位移，不能省略，取值可用百分比或長度；

第二個：設置對象在Y軸的位移，不能省略，取值可用百分比或長度；

：設置對象在Z軸的位移，不能省略。

三、translatez()和translate3d()應用實例

1、translatez()應用實例

html代碼：

transform:translatez(150px)

CSS樣式：

.translatez{transform:translatez(150px);width:230px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

效果圖：

transform:translatez(150px)

2、translate3d()應用實例

html代碼：

transform:translate3d(100px,120px,200px);

CSS樣式：

.translate3d{transform:translate3d(100px,120px,200px);width:350px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

效果圖：

transform:translate3d(100px,120px,200px);

總結

以上是生活随笔為你收集整理的css translate 坐标,CSS3 位移转换 translate3d()translatez()应用实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。