从其他状态继承转换值

Question

我有一个图像，可以在悬停时缩放。但是，与此同时，图像在 X 轴和 Y 轴上都转换为 -50%，或者在某些情况下，仅在 X 轴上

。

有没有办法继承以前的转换，同时仍然更改其中一个值？

.container {
  position: relative;
  height: 400px;
  width: 640px;
  overflow: hidden;
}
img {
  -webkit-transform: translate(-50%,-50%) scale(1);
  transform: translate(-50%,-50%) scale(1);
  position: absolute;
  top: 50%;
  left: 50%;
  transition: 500ms;
}
img.special {
  -webkit-transform: translateX(-50%) scale(1);
  transform: translateX(-50%) scale(1);
  top: 0;
}
img:hover {
  -webkit-transform: translate(-50%, -50%) scale(1.1);
  transform: translate(-50%, -50%) scale(1.1);
}

<div class="container">
  <img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
</div>
<div class="container">
  <img src="http://www.lorempixel.com/640/400/abstract" class="special" alt="test image" />
</div>

TL：DR;有没有办法继承原始转换设置，同时仍然更改其中一个值？我不是在寻找添加额外 css、类或其他任何东西的答案。我只是在寻找一种方法来保持尽可能简短。我已经使用额外的类和 CSS 解决了这个问题。

Answer 1

有没有办法继承原始转换设置，同时仍然更改其中一个值？

不，在 CSS 中没有办法做到这一点。CSS transform属性声明（与所有其他属性一样）不是累加的。最新的设置（或）更具体的设置将完全覆盖指定的任何其他内容，因此没有机会继承某些值并在其上添加。

纯 CSS 的唯一替代方法是添加一个额外的包装器并对其应用其中一个转换。这样，img:hover样式（scale）不需要重复，可以保留为所有人的通用样式。

.container {
  position: relative;
  height: 400px;
  width: 640px;
  overflow: hidden;
}
.wrapper {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
.special.wrapper {
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 0;
}
.wrapper img {
  transition: 500ms;
}
img:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<div class="container">
  <div class="wrapper">
    <img src="http://www.lorempixel.com/640/400/nature" alt="test image" />
  </div>
</div>
<div class="container">
  <div class="wrapper special">
    <img src="http://www.lorempixel.com/640/400/people" alt="test image" />
  </div>
</div>

另一种方法是使用 JavaScript，找出元素上的当前转换是什么，然后在悬停时附加额外的转换并通过内联样式应用它。