translate

Avatar of Joel Olawanle
Joel Olawanle

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费积分!

translate CSS 属性允许您将元素从一个地方转移到另一个地方,沿 X(水平)轴、Y(垂直)轴和 Z(深度)轴,类似于您使用偏移量(如 topbottomleftright)移动元素的方式。

.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。这意味着我们可以从一个地方过渡到另一个地方,例如,当元素被悬停时。

或者,我们可以使用 @keyframesrotate 与 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%;
    }
  }
}

浏览器支持

演示

更多信息

进一步阅读