翻译
试试看
语法
css
/* Keyword values */
translate: none;
/* Single values */
translate: 100px;
translate: 50%;
/* Two values */
translate: 100px 200px;
translate: 50% 105px;
/* Three values */
translate: 50% 105px 5rem;
/* Global values */
translate: inherit;
translate: initial;
translate: revert;
translate: revert-layer;
translate: unset;
值
- 单个
<length-percentage>
值 -
一个
<length>
或<percentage>
,指定沿 X 轴的平移。等效于指定单个值的translate()
(2D 平移)函数。 - 两个
<length-percentage>
值 -
两个
<length>
或<percentage>
,分别指定 2D 平移的 X 和 Y 轴平移值。等效于指定两个值的translate()
(2D 平移)函数。 - 三个值
-
两个
<length-percentage>
和一个<length>
值,分别指定 3D 平移的 X、Y 和 Z 轴平移值。等效于translate3d()
(3D 平移)函数。 无
-
指定不应应用任何平移。
正式定义
正式语法
示例
悬停时平移元素
此示例演示了如何使用 translate
属性在三个轴上移动元素。第一个框沿 X 轴移动,第二个框沿 X 和 Y 轴移动。第三个框沿 X、Y 和 Z 轴移动,并且由于在父元素中添加了 perspective
,因此看起来像朝向查看者移动。
HTML
html
<div class="wrapper">
<div id="box1">translate X</div>
<div id="box2">translate X,Y</div>
<div id="box3">translate X,Y,Z</div>
</div>
CSS
css
.wrapper {
perspective: 100px;
display: inline-flex;
gap: 1em;
}
.wrapper > div {
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
translate: 20px;
}
#box2:hover {
translate: 20px 20px;
}
#box3:hover {
translate: 5px 5px 30px;
}
结果
规范
规范 |
---|
CSS 变换模块 Level 2 # individual-transforms |
浏览器兼容性
BCD 表格仅在启用了 JavaScript 的浏览器中加载。