CSS - 翻译


CSS 翻译

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

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

可能的值

  • 单个<length-percentage>值:

    • <length><percentage>值,指定沿 X 轴的平移。

    • 与translate()函数相同,指定一个值。

  • 两个<length-percentage>值:

    • 两个<length><percentage>值,指定沿 X 轴和 Y 轴的平移。

    • 与translate()函数相同,指定了两个值。

  • 三个值:

    • 两个<length-percentage>和单个<length>值,指定沿 X、Y 和 Z 轴的平移。

    • 与translate3d()函数相同,指定了三个值。

  • none:不应应用翻译。

适用于

所有可变形元素。

DOM语法

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

CSS 翻译 - 无

这是一个翻译设置为none的示例。

<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 平移 - X 轴

这是我们设置翻译的示例:<length> | <百分比>仅适用于 X 轴:

<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> <p>Bring cursor over the boxes to see the result.</p> <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 平移 - Y 轴

这是我们设置翻译的示例:<length> | <百分比>仅适用于 Y 轴

<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> <p>Bring cursor over the boxes to see the result.</p> <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 平移 - Z 轴

这是我们设置翻译的示例:<length> | <百分比>仅适用于 Z 轴

<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> <p>Bring cursor over the boxes to see the result.</p> <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 翻译 - X 和 Y 轴

这是我们设置翻译的示例:<length> | X 轴和 Y 轴的<百分比>

<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> <p>Bring cursor over the boxes to see the result.</p> <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 翻译 - Y 和 Z 轴

这是我们设置翻译的示例:<length> | Y 轴和 Z 轴的 <百分比>:

<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> <p>Bring cursor over the boxes to see the result.</p> <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 翻译 - X 和 Z 轴

这是我们设置翻译的示例:<length> | X 轴和 Z 轴的<百分比>

<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> <p>Bring cursor over the boxes to see the result.</p> <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 翻译 - X、Y 和 Z 轴

这是我们设置翻译的示例:<length> | X、Y 和 Z 轴的<百分比>

<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> <p>Bring cursor over the boxes to see the result.</p> <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>