Css 简明教程

CSS - translate Property

CSS 的 translate 属性允许您沿着 X 轴（水平）、Y 轴（垂直）和 Z 轴（深度）移动元素。

The translate property of CSS allows you to move an element along the X axis (horizontal), Y axis (vertical) and Z axiz (depth).

translate 属性与 * transform* 属性的 * translate()* 函数类似。两者之间的唯一区别是 * transform* 不支持 Z 轴设置。

The translate property is similar to the translate() function of transform property. The only difference between the two is that latter does not support the Z axis setting.

Possible values

  1. Single <length-percentage> value:[style="arabic"]

    1. <length> or <percentage> value, specifying a translation along X axis.

    2. Same as translate() function, with one value specified.

  2. Two <length-percentage> values:[style="arabic"]

    1. Two <length> or <percentage> values, specifying the translation along X and Y axes.

    2. Same as translate() function, with two values specified.

  3. Three values:[style="arabic"]

    1. Two <length-percentage> and single <length> values, specifying the translation along X, Y and Z axes.

    2. Same as translate3d() function, with three values specified.

  4. none: No translation should be applied.

Applies to

所有可转换元素。

All the transformable elements.

DOM Syntax

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

CSS translate - No translation set

这里是一个示例，其中 translate 设置为 none ，导致没有翻译。与伪类 :hover 一起应用。

Here is an example where translate is set to none, which results in no translation. Applied along with the pseudo-class :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 - Using length-percentage for translate on X-axis

这里是一个示例，其中 translate: <length> | <percentage> 值仅设置用于 X 轴，它沿着 X 轴转换元素。与伪类 :hover 一起应用。

Here is an example where translate: <length> | <percentage> value is set for X axis only, which translates the element along X-axis. Applied along with pseudo-class :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 - Using length-percentage for translate on Y-axis

这里是一个示例，其中 translate: <length> | <percentage> 值仅设置用于 Y 轴，它沿着 Y 轴转换元素。与伪类 :hover 一起应用。

Here is an example where translate: <length> | <percentage> value is set for Y axis only, which translates the element along Y-axis. Applied along with pseudo-class :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 - Using length-percentage for translate on Z-axis

这里是一个示例，其中 translate: <length> | <percentage> 值仅设置用于 Z 轴，它沿着 Z 轴转换元素。与伪类 :hover 一起应用。

Here is an example where translate: <length> | <percentage> value is set for Z axis only, which translates the element along Z-axis. Applied along with pseudo-class :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 - Using length-percentage for translate on X and Y axes

这里是一个示例，其中 translate: <length> | <percentage> 值设置用于 X 和 Y 轴，它沿着 X 和 Y 轴转换元素。与伪类 :hover 一起应用。

Here is an example where translate: <length> | <percentage> value is set for X and Y axes, which translates the element along the X and Y axes.Applied along with pseudo-class :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 - Using length-percentage for translate on Y and Z axes

这里是一个示例，其中 translate: <length> | <percentage> 值设置用于 Y 和 Z 轴，它沿着 Y 和 Z 轴转换元素。与伪类 :hover 一起应用。

Here is an example where translate: <length> | <percentage> value is set for Y and Z axes, which translates the element on Y and Z axes. Applied along with pseudo-class :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 - Using length-percentage for translate on X and Z axes

这里是一个示例，其中 translate: <length> | <percentage> 值设置用于 X 和 Z 轴，它沿着 X 和 Z 轴转换元素。与伪类 :hover 一起应用。

Here is an example where translate: <length> | <percentage> value is set for X and Z axes, which translates the element along X and Z axes. Applied along with pseudo-class :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 - Using length-percentage for translate on X, Y and Z axes

这里是一个示例，其中 translate: <length> | <percentage> 值设置用于 X、Y 和 Z 轴，它沿着所有三个轴转换元素。与伪类 :hover 一起应用。

Here is an example where translate: <length> | <percentage> value is set for X, Y and Z axes, which translates the element along all the three axes. Applied along with pseudo-class :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>