CSS - translate 属性_CSS 菜鸟教程

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>

<< CSS - zoom（缩放） CSS - Height 属性 >>