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

首頁

web前端

css教學

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

云罗郡主

Oct 29, 2018 pm 01:44 PM

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用法總結

總結：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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@KeyFrames CSS：最常用的技巧May 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatoryand and powerincreatingsmoothcsssanimations.keytricksinclude：1）definingsmoothtransitionsbetnestates，2）使用AnimatingMultatingMultationMultationProperPertiessimultane，3）使用使用4）使用BombingeNtibalibility，4）使用CombanningWiThjavoFofofofoftofofo

CSS計數器：自動編號的綜合指南May 07, 2025 pm 03:45 PM

CSSCOUNTERSAREDOMANAGEAUTOMANAMBERINGINWEBDESIGNS.1）他們可以使用forterablesofcontents，ListItems，and customnumbering.2）AdvancedsincludenestednumberingSystems.3）挑戰挑戰InclassINCludeBrowsEccerCerceribaliblesibility andperformiballibility andperformissises.4）創造性