translateX 和 translateY 在同一个元素上？

Question

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

如果我尝试这样做，translateX 会被 translateY 覆盖：

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

Answer 1

你可以这样做

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

Answer 2

在您的情况下，您可以使用 translate 属性 :

同时应用 X 和 Y 翻译

transform: translate(tx[, ty]) /* one or two <translation-value> values */

对于您的示例，它看起来像这样：

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

演示：

div{
  position:absolute;
  top:50%; left:50%;
  width:100px; height:100px;
  transform: translate(-50%,-50%);
  background:tomato;
}

<div></div>

如该回答所述How to apply multiple transforms in CSS3?，您可以通过在同一个声明中指定它们来对同一个元素应用多个转换：

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

Answer 3

您可以将 X 和 Y 组合成一个表达式：

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

而且，一般来说，几个转换成一个规则：

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

translateX and translateY on same element?