首页 文章

CSS - transform：scale（）与元素大小无关

提问于
浏览 次
0

有没有办法将 transform: scale() 应用于一个元素（或类似的东西，尽管理想情况下它应该能够安全地动画化），这会使元素看起来更大，但是"ignore"元素's size (obviously this isn't正是我的意思，继续阅读） .

Here是我的意思的一个例子 .

基本上，这个想法是使2个不同尺寸的元素看起来以相同的方式缩放，尽管有2种不同的尺寸 . 应该注意的是，元素不会是固定宽度，并且将继承其容器的大小（其宽度也是不确定的） .

css css-transforms

1 回答

  • 0

    更新

    感谢@TemaniAfif，可以通过操纵左右边距而不是宽度来进一步优化解决方案 .

    .small {
  width: 100px;
  margin: 10px;
  background-color: #1abc9c;
}

.large {
  width: 900px;
  margin: 10px;
  background-color: #3498db;
}

.target {
  background-color: inherit;
}

.target:hover {
  margin: 0 -12px;
  transform: scaleY(1.2);
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
}

    <div class="small">
  <div class="target">Small</div>
</div>
<div class="large">
  <div class="target">Large</div>
</div>

    原始答案

    scale 函数通过乘法调整元素大小，但您需要在变量x轴上进行常量放大 . 而是使用 scale ，在代理元素（.target）的宽度上使用 calc 来在需要放大元素时添加常量像素 . 通过放大宽度，元素的位置也需要一个偏移量使其向左增长，因此将 left 设置为负数，这是总放大的一半 . 由于两个元素的高度相同，使用 scaleY 来缩放它们是可以的 .

    .small {
  width: 100px;
  margin: 10px;
  background-color: #1abc9c;
}

.large {
  width: 900px;
  margin: 10px;
  background-color: #3498db;
}

.target {
  position: relative;
  left: 0;
  width: 100%;
  background-color: inherit;
}

.target:hover {
  left: -12px;
  width: calc(100% + 24px);
  transform: scaleY(1.2);
  transition: transform 0.3s ease-in-out, left 0.3s ease-in-out, width 0.3s ease-in-out;
}

    <div class="small">
  <div class="target">Small</div>
</div>
<div class="large">
  <div class="target">Large</div>
</div>
    回复于

相关问题