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

[ 来源:MDN ]

对于你的例子,它看起来像这样:

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

DEMO:

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

<div></div>

如此答案所述如何在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);