为什么我的变换：在两个轴上都不能平移？

Question

我的转换：translate（10px 10px）不起作用。当我只输入x轴的值时，它可以工作。同样，当我使用translateX和translateY时，它们确实起作用，但不能同时起作用。因此，我只能在一个轴上平移图像，而不能在两个轴上平移。有什么想法吗？

.gallery {
  text-align: center;
}

.gallery img {
  position: relative;
  width: 30%;
  height: calculate(width*66%);
  margin: 10px;
  animation-name: blendin;
  animation-duration: 3s;
  transition: ease-in-out all 300ms;
}

.gallery img:hover {
  box-shadow: 10px 10px 10px black;
  transform: translate(10px 10px);
}

<div class="gallery">
  <img src="elbe.jpg" alt="Elbe">
  <img src="tisch.jpg" alt="Tisch">
  <img src="spiegelung.jpg" alt="Spiegelung">
</div>

Answer 1

translate在CSS中需要昏迷。所以不是：

transform: translate(10px 10px);

但是：

transform: translate(10px, 10px);

.gallery {
  text-align: center;
}

.gallery img {
  position: relative;
  width: 30%;
  height: calculate(width*66%);
  margin: 10px;
  animation-name: blendin;
  animation-duration: 3s;
  transition: ease-in-out all 300ms;
}

.gallery img:hover {
  box-shadow: 10px 10px 10px black;
  transform: translate(10px, 10px);
}

<div class="gallery">
  <img src="elbe.jpg" alt="Elbe">
  <img src="tisch.jpg" alt="Tisch">
  <img src="spiegelung.jpg" alt="Spiegelung">
</div>