在同一个元素上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 */

[来源：MDN]

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

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

演示：

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);

Answer 4

直接使用

translate

CSS 属性：

body {
 border: 2px dotted red;
}

div {
  width: 80px;
  height: 80px;
  background: green;
  
  translate: 100px 20px;
}

<div></div>

单值

A

<length>

或指定沿

X

轴的平移。相当于指定单个值的

translate()

（2D 平移）函数。

两个值

两个

<length>

或 分别指定 2D 平移的

X

和

Y

轴平移值。相当于指定了两个值的

translate()

（2D 平移）函数。

三个值

两个

<length-percentage>

和单个

<length>

值，分别指定 3D 平移的

X

、

Y

和

Z

轴平移值。相当于

translate3d()

（3D翻译）功能。