为什么我的 transform: translate 在两个轴上都不起作用？ [关闭]

【问题标题】：Why does my transform: translate not work on both axes? [closed]为什么我的 transform: translate 在两个轴上都不起作用？ [关闭]
【发布时间】：2020-02-16 01:15:36
【问题描述】：

我的转换：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>

【问题讨论】：

标签： html css image css-transforms

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

【讨论】：

最好关闭诸如错字之类的问题。快速查找文档或谷歌搜索将给出答案
@TemaniAfif 我知道并且我已经标记了它。但是谁不想要这些免费积分；）
您以后只会丢失它们，因为这样的问题将在不久的将来被删除。