Question

我正在寻找一种基于任何数字/像素均等缩放我的元素的方法，无论它们的宽度和高度如何。因此与它们的大小不成比例。

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  background: #20262E;
}

.box {
  display: inline-block;
  margin: 25px;
  transition: transform 1s;
}
.box:hover {
  transform: scale(1.1);
}


.one {
  width: 50px;
  height: 50px;
  background-color: red;
}

.two {
  width: 100px;
  height: 100px;
  background-color: orangered;
}

.three {
  width: 300px;
  height: 100px;
  background-color: tomato;
}

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>

我知道我可以将缩放效果应用于每个单独的元素，并手动决定它们应在垂直和水平方向上缩放多少，这看起来像下面的示例，但我希望将其一行始终可以从源进行更改。

JSFiddle version

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  background: #20262E;
}

.box {
  display: inline-block;
  margin: 25px;
  transition: transform 1s;
}

.one {
  width: 50px;
  height: 50px;
  background-color: red;
}
.one:hover {
  /* Add 5px to height and width (1.1 scale = 2.5px added on each side) */
  transform: scale(1.1);
}

.two {
  width: 100px;
  height: 100px;
  background-color: orangered;
}
.two:hover {
  /* Add the same 5px to height and width by applying half of the same scale (1.05) */
  /* because the width and height are double that of box one. */
  transform: scale(1.05);
}

.three {
  width: 300px;
  height: 100px;
  background-color: tomato;
}
.three:hover {
  /* Here we apply the same 1.05 scale to the height, but apply another scale */
  /* for the width because it is 3 times bigger, but still want to add only 5px. */
  transform: scaleY(1.05) scaleX(1.016666667);
}

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>

您可以在小提琴中看到，scale()中的值根据高度和宽度而不同，如果它们的高度和宽度彼此不同，则需要scaleX()和{ {1}}，而且这在更大范围内是无法管理的（双关语不是故意的，但我希望它是-这是一个好方法！）

现在我想到的是类似scaleY()的东西，因此高度和宽度保持不变scale(calc(1 + 5px)，但是增加了scale(1)，但是不幸的是，事情并非如此简单。

如果有Sass解决方案，我也很乐意接受！

注意：该效果应该可以应用于任何元素，因此不只是背景的高度和宽度。想象一下样式按钮的框，其中该按钮的每个部分都必须是缩放。

Answer 1

如果scale不是必需的，我会考虑另一种技巧，即使用宽度/高度和负边距使元素变大。然后，您只需要编写CSS，它将适用于所有CSS：

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  background: #20262E;
}

.box {
  display: inline-block;
  margin: 25px;
}

.one {
  width: 50px;
  height: 50px;
  background-color: red;
}

.two {
  width: 100px;
  height: 100px;
  background-color: orangered;
}

.three {
  width: 300px;
  height: 100px;
  background-color: tomato;
}

.box > div  {
  width:100%;
  height:100%;
  background:inherit;
  transition: all 0.5s;
}
.box:hover > div  {
  margin:-5px;
  width:calc(100% + 10px);
  height:calc(100% + 10px);
}

<div class="box one">
<div ></div>
</div>
<div class="box two">
<div ></div>
</div>
<div class="box three">
<div ></div>
</div>

如何均匀缩放元素，而不考虑元素的宽度/高度

1 个答案: