css中位移translate()如何使用？ translate用法總結-css教學-PHP中文網

css中位移translate()如何使用？ translate用法總結

云罗郡主

發布： 2018-10-29 13:44:30

原創

37080 人瀏覽過

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>

登入後複製

效果如下：

css中位移translate()如何使用？ translate用法總結