Css 同一元素上的translateX和translateY？

是否可以在同一元素上应用CC translate X和Y

如果我尝试此操作，translateX将被translateY覆盖：

.something { 
        transform: translateX(-50%);
        transform: translateY(-50%);
}

---

你可以这样做

transform:translate(-50%,-50%);

---

在您的情况下，可以使用

translate

属性应用X和Y翻译：

transform:translate（tx[，ty]）/*一个或两个值*/

[]

对于您的示例，它将如下所示：

.something { 
  transform: translate(-50%,-50%);
}

演示：

div{
位置：绝对位置；
顶部：50%；左侧：50%；
宽度：100px；高度：100px；
转换：翻译（-50%，-50%）；
背景：番茄；
}

---

您可以将X和Y转换为单个表达式：

transform: translate(10px, 20px); /* translate X by 10px, y by 20px */

而且，一般来说，多个转换为一个规则：

transform: translateX(10px) translateY(20px) scale(1.5) rotate(45deg);

---

我知道这是一个演示，但请记住包括浏览器前缀well@Jeroen不是重复的，这实际上是不同的。@mattytomo不是吗？

.something{transform:translateX（-50%）translateY（-50%）；}

不是一个解决方案吗？@Jeroen是的，但真正的答案是存在包含两个轴的

translate

属性，从而消除了对重复属性的需要。