DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!
translate
CSS 属性允许您将元素从一个地方转移到另一个地方,沿 X(水平)轴、Y(垂直)轴和 Z(深度)轴,类似于您使用偏移量(如 top
、bottom
、left
和 right
)移动元素的方式。
.element {
translate: 100px;
}
translate
属性的工作方式与与 translate()
函数一起使用的 transform
属性完全相同,
.element {
transform: translate(100px);
}
区别在于 translate()
函数不支持三维 Z 轴。
语法
translate: none | <length-percentage> [ <length-percentage> <length>? ]?;
…其中 <length-percentage>
可以是长度值或百分比值。在编写值时,translate
可以在一个声明中取一个、两个或三个值。
/* Keyword value */
translate: none;
/* Single value */
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: unset;
声明一个值仅沿 X 轴平移元素。声明两个值独立设置 X 和 Y 轴。声明三个值分别设置 X、Y 和 Z 轴。
- 初始:
none
- 应用于: 可转换元素
- 继承: 否
- 百分比: 指的是边界框的大小
- 计算值: 按指定方式,但将相对长度转换为绝对长度
- 动画类型: 变换
- 创建堆叠上下文: 是
值
none
: 用于指定不应用任何平移。<length-percentage>
: 这是一个数值,用于确定沿轴平移元素的距离。
当我们在 translate
属性中使用百分比值时,该百分比是指元素的大小,而不是父容器内的可用空间。
translate
不会改变影响布局流
重要的是要知道,translate
属性不会导致其他元素围绕它流动,这与我们在使用变换(即 transform:translate()
)时预期的不同。请注意,当框平移时,它不会扭曲或影响其周围元素。
过渡和动画
我们可以在 CSS 过渡和动画中使用 translate
。这意味着我们可以从一个地方过渡到另一个地方,例如,当元素被悬停时。
或者,我们可以使用 @keyframes
将 rotate
与 CSS 动画中的单个变换结合起来,以制作更有趣的效果
如果你仔细查看浏览器支持,你可能需要考虑一个回退解决方案,该解决方案适用于其他浏览器,直到 translate
属性获得完整的浏览器支持。transform
属性是独立变换属性(如 rotate
)的可行回退替代方案。
例如,我们可以将 rotate
动画放到 @supports
块中。这样,动画只会在浏览器支持 translate
属性时运行
/* Using transform by default */
@keyframes loader {
0% {
transform: translate(0);
}
100% {
transform: translate(100% 50%);
}
}
/* Use translate instead, but only if it is supported */
@supports (translate: 0deg) {
@keyframes loader {
0% {
translate: 0;
}
100% {
translate: 100% 50%;
}
}
}