CSS 的 translate 属性允许您沿 X 轴（水平）、Y 轴（垂直）和 Z 轴（深度）移动元素。
translate 属性类似于 transform 属性的 translate（） 函数。两者之间的唯一区别是后者不支持 Z 轴设置。
可能的值1. 单个<length-percentage>值：
- <length> 或 <percentage> 值，指定沿 X 轴的平移。
- 与 translate（） 函数相同，但指定了一个值。
2. 两个<length-percentage> 值：
- 两个 <length> 或 <percentage> 值，指定沿 X 轴和 Y 轴的平移。
- 与 translate（） 函数相同，但指定了两个值。
3. 三价值：
- 两个<length-percentage> 和单个 <length>值，指定沿 X、Y 和 Z 轴的平移。
- 与 translate3d（） 函数相同，但指定了三个值。
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 - 在 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 - 在 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 - 在 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 - 在 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 - 在 Y 轴和 Z 轴上使用长度百分比进行翻译
下面是一个示例，其中为 Y 和 Z 轴设置了 translate： <length> | <percentage> 值，这将在 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 - 在 X 轴和 Z 轴上使用长度百分比进行翻译
以下示例为 X 轴和 Z 轴设置了 translate： <length> | <percentage> 值，该值沿 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 - 在 X、Y 和 Z 轴上使用长度百分比进行翻译
以下示例中为 X、Y 和 Z 轴设置了 translate： <length> | <percentage> 值，该值沿所有三个轴平移元素。与伪类 ：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>
