translateX和translateY在同一个元素上？

Question

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

如果我尝试这个翻译，翻译会覆盖translateX：

.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 */

[source: MDN]

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

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

<强>样本：

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

---

正如本回答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);