CSS - translate 屬性

上一頁
下一頁

CSS 的translate屬性允許您沿 X 軸（水平）、Y 軸（垂直）和 Z 軸（深度）移動元素。

translate屬性類似於translate()函式，該函式是transform屬性的一部分。兩者唯一的區別在於後者不支援 Z 軸設定。

可能的值

1. 單個<length-percentage>值

2. 兩個<length-percentage>值

3. 三個值

4. none：不應用任何平移。

應用於

所有可轉換的元素。

DOM 語法

object.style.translate = "none | <length-percentage> <length>";

CSS translate - 未設定平移

這是一個示例，其中translate設定為none，這導致沒有平移。與偽類 :hover 一起使用。

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 5px;
        border: 1px solid black;
    }
    #m:hover {
        background-color: orange;
        translate: none;
    }
</style>
</head>
<body>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - 使用 length-percentage 對 X 軸進行平移

這是一個示例，其中translate: <length> | <percentage>值僅為 X 軸設定，這會沿 X 軸平移元素。與偽類 :hover 一起使用。

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 20px 0;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 50% 0;
    }
    #p:hover {
        background-color: royalblue;
        translate: 2rem 0;
    }
    #m:hover {
        background-color: orange;
        translate: -30% 0;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - 使用 length-percentage 對 Y 軸進行平移

這是一個示例，其中translate: <length> | <percentage>值僅為 Y 軸設定，這會沿 Y 軸平移元素。與偽類:hover一起使用。

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 0 10px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 0 50%;
    }
    #p:hover {
        background-color: royalblue;
        translate: 0 -30px;
    }
    #m:hover {
        background-color: orange;
        translate: 0 -30%;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - 使用 length-percentage 對 Z 軸進行平移

這是一個示例，其中translate: <length> | <percentage>值僅為 Z 軸設定，這會沿 Z 軸平移元素。與偽類 :hover 一起使用。

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 0 0 10px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 0 0 50%;
    }
    #p:hover {
        background-color: royalblue;
        translate: 0 0 -30px;
    }
    #m:hover {
        background-color: orange;
        translate: 0 0 -30%;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - 使用 length-percentage 對 X 和 Y 軸進行平移

這是一個示例，其中translate: <length> | <percentage>值同時為 X 和 Y 軸設定，這會沿 X 和 Y 軸平移元素。與偽類 :hover 一起使用。

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 10px 30px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 50% -40%;
    }
    #p:hover {
        background-color: royalblue;
        translate: -30px -20px;
    }
    #m:hover {
        background-color: orange;
        translate: -30% 15px;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - 使用 length-percentage 對 Y 和 Z 軸進行平移

這是一個示例，其中translate: <length> | <percentage>值同時為 Y 和 Z 軸設定，這會沿 Y 和 Z 軸平移元素。與偽類:hover一起使用。

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 0 10px 30px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 0 10% 20%;
    }
    #p:hover {
        background-color: royalblue;
        translate: 0 -30px -20px;
    }
    #m:hover {
        background-color: orange;
        translate: 0 -30% 15px;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - 使用 length-percentage 對 X 和 Z 軸進行平移

這是一個示例，其中translate: <length> | <percentage>值同時為 X 和 Z 軸設定，這會沿 X 和 Z 軸平移元素。與偽類 :hover 一起使用。

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 10px 0 30px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 10% 0 20%;
    }
    #p:hover {
        background-color: royalblue;
        translate: -30px 0 -20px;
    }
    #m:hover {
        background-color: orange;
        translate: -30% 0 15px;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>

CSS translate - 使用 length-percentage 對 X、Y 和 Z 軸進行平移

這是一個示例，其中translate: <length> | <percentage>值同時為 X、Y 和 Z 軸設定，這會沿所有三個軸平移元素。與偽類 :hover 一起使用。

<html>
<head>
<style>
    div.box {
        height: 50px;
        width: 50px;
        display: inline-block;
        padding: 15px;
        border: 1px solid black;
    }
    #n:hover {
        background-color: lavender;
        translate: 10px 20px 30px;
    }
    #o:hover {
        background-color: palevioletred;
        translate: 10% 30% 20%;
    }
    #p:hover {
        background-color: royalblue;
        translate: -30px 10px -20px;
    }
    #m:hover {
        background-color: orange;
        translate: -30% 10px 30px;
    }
</style>
</head>
<body>
    <div id="n" class="box"></div>
    <div id="o" class="box"></div>
    <div id="p" class="box"></div>
    <div id="m" class="box"></div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告