溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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為負值的時候，表示該元素向左移動，
例如:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3位移translate()方法</title>
<style type="text/css">
/*設置原始元素樣式*/
#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-引擎瀏覽器*/
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>效果如下：
總結：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()的使用方法的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
