translateX 和 translateY 在同一个元素上？答案

【问题标题】：translateX and translateY on same element?translateX 和 translateY 在同一个元素上？
【发布时间】：2015-06-21 07:28:47
【问题描述】：

是否可以在同一个元素上应用 CC 平移 X 和 Y？

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

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

【问题讨论】：

How to apply multiple transforms in CSS3?的可能重复
我知道这是一个演示，但请记住也要包括浏览器前缀
@Jeroen 不是重复的，这实际上是不同的。
@mattytommo 不是吗？ .something { transform: translateX(-50%) translateY(-50%); } 不是解决方案吗？
@Jeroen 会，但真正的答案是存在包含两个轴的 translate 属性，因此无需重复属性。

【解决方案1】：

你可以这样做

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

【讨论】：

【解决方案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;
}

&lt;div&gt;&lt;/div&gt;

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

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

【讨论】：

【解决方案3】：

您可以将 X 和 Y 转换成一个表达式：

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

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

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

【讨论】：