Css 简明教程

CSS - translate Property

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

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

Possible values

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

    1. * &lt;length&gt;* 或 * &lt;percentage&gt;* 值，指定沿着 X 轴平移。

    2. 与 * translate()* 函数相同，指定一个值。

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

    1. 两个 * &lt;length&gt;* 或 * &lt;percentage&gt;* 值，指定沿着 X 轴和 Y 轴平移。

    2. 与 * translate()* 函数相同，指定两个值。

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

    1. 两个 * &lt;length-percentage&gt;* 和单个 * &lt;length&gt;* 值，指定沿着 X 轴、Y 轴和 Z 轴平移。

    2. 与 * translate3d()* 函数相同，指定三个值。

  4. none ：不应用平移。

Applies to

所有可转换元素。

DOM Syntax

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

CSS translate - No translation set

这里是一个示例，其中 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 - Using length-percentage for translate on X-axis

这里是一个示例，其中 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 - Using length-percentage for translate on Y-axis

这里是一个示例，其中 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 - Using length-percentage for translate on Z-axis

这里是一个示例，其中 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 - Using length-percentage for translate on X and Y axes

这里是一个示例，其中 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 - Using length-percentage for translate on Y and Z axes

这里是一个示例，其中 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 - Using length-percentage for translate on X and Z axes

这里是一个示例，其中 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 - Using length-percentage for translate on X, Y and Z axes

这里是一个示例，其中 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>