在没有反向缩放的情况下与缩放的兄弟保持对齐

Question

我有一个元素需要缩放背景，而不缩放父元素中的元素。我通过使用 pseudo 元素定义背景实现了这一点，然后在 hover 上我简单地缩放了 pseudo 元素。到目前为止，还不错...

问题是，我需要一些元素与缩放后的背景保持一致，尽管它们本身没有缩放。我最初的计划是简单地 translate 它们，但我很快意识到这是不可能的，因为 scale 基于倍数，而 translate 基于 percentage/pixels 等等。 .

显而易见的解决方案是废弃 scale 并使用边距缩小绝对定位的 pseudo 元素。但是，我对此持保留意见的是 transition 保证金值是不好的做法。

有谁能想出一种既能使用scale又能保持对齐的方法吗？

更新

我想不惜一切代价避免 inverse/reverse 缩放，因为在大多数情况下它在浏览器中呈现得很糟糕。考虑到这一点，我认为这实际上是不可能的，但如果有人知道一些 CSS 魔法，我会留下这个问题。

以下面的片段为例：

.tile {
  position: relative;
  width: 500px;
  height: 100px;
  padding: 40px;
}

.tile:hover:before {
  transform: scale(.9);
}

.tile:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  z-index: -1;
  transition: transform .3s ease-out;
}

h1 {
  text-align: center;
  color: white;
}

.tile > .button {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  background: red;
  padding: 10px 15px;
  color: white;
}

<div class="tile">
  <h1>Hello World</h1>
  <div class="button">Align Me</div>
</div>

Answer 1

如果您按 p 缩放，那么您将缩小尺寸，新宽度将变为 width*(1 - p)。高度的逻辑相同。您可以考虑使用 calc() 并使用此公式轻松定义翻译。

我们除以 2，因为我们从两侧减少，我们将从一侧平移

.tile {
  position: relative;
  width: 540px;
  height: 200px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tile:hover:before {
  transform: scale(0.9);
}
.tile:hover .button{
  transform: translate(calc(-540px*0.1/2),calc(200px*0.1/2));
}
.tile:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  z-index: -1;
  transition: transform .3s;
}

h1 {
  text-align: center;
  color: white;
  margin:0;
}

.tile > .button {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  background: red;
  padding: 10px 15px;
  color: white;
  transition: transform .3s ;
}

<div class="tile">
  <h1>Hello World</h1>
  <div class="button">Align Me</div>
</div>

可以考虑CSS个变量来方便的改变比例值：

.tile {
  position: relative;
  width: 540px;
  height: 200px;
  display:flex;
  align-items:center;
  justify-content:center;
  --s:0.9;
}

.tile:hover:before {
  transform: scale(var(--s));
}
.tile:hover .button{
  transform: translate(calc(-540px*(1 - var(--s))/2),calc(200px*(1 - var(--s))/2));
}
.tile:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  z-index: -1;
  transition: transform .3s;
}

h1 {
  text-align: center;
  color: white;
  margin:0;
}

.tile > .button {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  background: red;
  padding: 10px 15px;
  color: white;
  transition: transform .3s ;
}

<div class="tile">
  <h1>Hello World</h1>
  <div class="button">Align Me</div>
</div>

<div class="tile" style="--s:0.5">
  <h1>Hello World</h1>
  <div class="button">Align Me</div>
</div>

Answer 2

尝试缩放 .tile 自身和 reverse-scaling 它的子项：

.tile {
  position: relative;
  width: 500px;
  padding: 40px;
  background: #000;
  transition: transform .3s ease-out;
}

h1 {
  text-align: center;
}

.tile>* {
  color: white;
  transition: transform .3s ease-out;
}

.tile>.button {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  padding: 10px 15px;
  color: white;
  transform-origin: 100% 0;
}

.tile:hover {
  transform: scale(.9);
}

.tile:hover>* {
  transform: scale(1.1);
}

<div class="tile">
  <section>
    <h1>Hello World</h1>
    <p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
      The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
      and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
      margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>
  </section>
  <div class="button">Align Me</div>
</div>

另一个想法是动画 top 和 right of .button:

html,
body {
  width: 75%; 
  margin: 0;
  padding: 0
}

* {
  box-sizing: border-box
}

.tile {
  position: relative;
  width: 100%;
  padding: 40px;
  color: white;
}

.tile:hover:before {
  transform: scale(.9);
}

.tile:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  z-index: -1;
  transition: transform .3s ease-out;
}

h1 {
  text-align: center;
}

.tile>.button {
  position: absolute;
  right: 0;
  top: 0;
  background: red;
  padding: 10px 15px;
  color: white;
  transition: .3s ease-out;
}

.tile:hover>.button {
  top: 5%;
  right: 5%
}

<div class="tile">
  <h1>Hello World</h1>
  <p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
    The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
    and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
    margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>

  <div class="button">Align Me</div>
</div>

下一个想法是使用更复杂的代码，但仅制作 transform 属性的动画：

html,
body {
  width: 75%;
}

* {
  box-sizing: border-box
}

.tile {
  position: relative;
  width: 100%;
  padding: 40px;
  color: white;
}

.tile:hover:before {
  transform: scale(.9);
}

.tile:before,
.tile>.button {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width:100%; height:100%;  
  background: #000;
  transition: transform .3s ease-out;
}

h1 {
  text-align: center;
}

.tile>.button {
  z-index: 1;
  display: flex;
  align-items: flex-start;
  margin: 0 -100% -100% 0;
  background: transparent;
  transition: .3s ease-out;
  pointer-events: none;
}

.tile>.button div {
  padding: 10px 15px;
  background: red;
  cursor: pointer;
  pointer-events: all;
}

.tile>.button:before {
  content: '';
  flex: 1 0;
}

.tile:hover>.button {
  transform: translate3d(-5%, 5%, 0);
}

<div class="tile">
  <h1>Hello World</h1>
  <p>I have an element that requires the background to be scaled, without scaling the elements within the parent. I have achieved this by using a pseudo element to define the background, and then on hover I simply scale the pseudo element. So far, so good...
    The problem is, I need some of the elements to stay inline with the scaled background, despite not scaling themselves. My original plan was to simply translate them, but I quickly realised that is not possible due to scale being based on multiples,
    and translate being based on percentage/pixels etc... The obvious solution is to scrap scale and instead use margin to shrink the absolutely positioned pseudo element. However, my reservation with this is that it is bad practice to transition the
    margin value. Can anybody think of a way in which I can use scale, and also maintain the alignment?</p>

  <div class="button">
    <div>Align Me</div>
  </div>
</div>

在没有反向缩放的情况下与缩放的兄弟保持对齐

Maintain alignment with scaled sibling without inverse-scaling

html

css

css-transitions

css-transforms

更新