css3中translate用法是怎么樣的？css中位移translate()如何使用？這些可能一些新手學習css所遇到的問題，接下來我們就來講解一下css中位移translate()如何使用？

一：translate()用法

在css樣式中，很多人都喜歡使用translate()來表示位移，可以使用translate()中的x和y來表示元素在水平方向或者垂直方向上移動。

例如：1.translateY(y)：表示該元素在垂直方向上移動，也就是我們所說的y軸

2.translateX(x):表示該元素在水平方向上移動，也就是我們所說的x軸

二：translate()語法transform:translateX(x);或者transform:translateY(y);

在css3中，transform屬性的變形方法都是屬于transform，并且要加上transform，從而表示變形處理，元素在水平方向中移動的距離的單位用px和百分比表示，當x出現正值的時候，表示元素在水平方向右有移動，當x為負值的時候，表示該元素向左移動，

例如:

CSS3位移translate()方法

/*設置原始元素樣式*/

#origin

{

margin:100px auto;/*水平居中*/

width:200px;

height:100px;

border:1px dashed silver;

}

/*設置當前元素樣式*/

#current

{

width:200px;

height:100px;

color:white;

background-color: #3EDFF4;

text-align:center;

transform:translateX(50px);

-webkit-transform:translateX(20px); /*兼容-webkit-引擎瀏覽器*/

-moz-transform:translateX(20px); /*兼容-moz-引擎瀏覽器*/

}

效果如下：

總結：transform:translateX(50px)說明在水平方向上移動50px，這時候我們如果我們把50px改成-50px，該元素就在水平方向相反的方向移動50px。

translate(y)的用法：

translate(y)的用法和translate(x)的用法很相似，x是在水平方向上移動，y是在垂直方向上移動，當

y出現正值的時候，說明該元素在向下移動，如果出現負值，說明是向上移動，和我們的正常思維相反。

translate(x,y)的混合使用：

表示元素在x中水平方向上移動，這里需要注意的是，y值是一個參數，沒有設置y的值話，可能表示元素在x軸移動，其實單純的使用translate()是沒有太多的意義，我們可以結合css使用。

以上就是對css中位移translate()如何使用？translate用法總結的全部介紹，如果你想了解更多有關CSS視頻教程，請關注Gxl網。

總結

以上是生活随笔為你收集整理的在css中translate表示,css中位移translate()如何使用？translate用法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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