Question

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

有没有办法在继续更改其中一个值的同时继承上一个转换？

.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，找出元素的当前变换，然后在悬停时附加额外的变换并通过内联样式应用它。

从其他状态继承transform-value

1 个答案: