css中位移translate()的使用方法

發(fā)布時(shí)間：2020-08-31 11:45:39 來源：億速云閱讀：1743 作者：小新欄目：web開發(fā)

小編給大家分享一下css中位移translate()的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一：translate()用法

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

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

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

二：translate()語法

transform:translateX(x);或者transform:translateY(y);

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

例如:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3位移translate()方法</title>
    <style type="text/css">
        /*設(shè)置原始元素樣式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed silver;
        }
        /*設(shè)置當(dāng)前元素樣式*/
        #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>

效果如下：

css中位移translate()的使用方法

總結(jié)：transform:translateX(50px)說明在水平方向上移動(dòng)50px，這時(shí)候我們?nèi)绻覀儼?0px改成-50px，該元素就在水平方向相反的方向移動(dòng)50px。

translate(y)的用法：

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

y出現(xiàn)正值的時(shí)候，說明該元素在向下移動(dòng)，如果出現(xiàn)負(fù)值，說明是向上移動(dòng)，和我們的正常思維相反。

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

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

以上是css中位移translate()的使用方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css中位移translate()的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽