css中位移translate()如何使用？ translate用法總結
- 云罗郡主原創
- 2018-10-29 13:44:0937150瀏覽
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為負值的時候，表示該元素向左移動，
例如:
<!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()如何使用？ translate用法總結的全部介紹，如果你想了解更多有關CSS影片教學，請關注php中文網。
以上是css中位移translate()如何使用？ translate用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！