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>
打印页面
上一页
下一页
广告