应用 CSS 变换比例而不移动其他元素答案

【问题标题】：Apply CSS transform scale without move other elements应用 CSS 变换比例而不移动其他元素
【发布时间】：2021-07-14 22:23:56
【问题描述】：

我想在悬停时增加元素背景和字体。但是，它确实会影响所有其他元素的位置，例如表单的边框、元素侧。我试图用 box-shadow 来做，但只有阴影被放大，而不是文本。

请帮忙

链接：Code for HTML and CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
}

.contenedor {
  display: inline-block;
  width: 400px;
  height: 400px;
}

form {
  padding: 30px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  width: 80px;
  background: #24b080;
  padding: 10px;
  border: 1px solid #24b080;
  cursor: pointer;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: all 0.3s ease-out;
}

input[type="submit"]:hover {
  background-color: #24b080;
  border: 2px solid #24b080;
  color: #fff;
  transform: scale(1.2, 1.2);
}

<form name="formulario" action="">
  <input type="submit" value="Send">
  <input type="submit" value="OK">
  <input type="submit" value="Cancel">
</form>

【问题讨论】：

标签： html css forms

【解决方案1】：

你可以改变这个

form {
  padding: 30px;
  border: 1px solid #ccc;
}

到这里：

form {
  padding: 30px;
  border: 1px solid #ccc;
  height: 120px;
}

如果你给表单一个固定的高度，那么当按钮变大时它就不能移动。

【讨论】：

【解决方案2】：

您可以将vertical-align: top; 应用到input[type="submit"] 以避免悬停时的轻微垂直移动（我猜这就是您的意思？）：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  text-align: center;
}

.contenedor {
  display: inline-block;
  width: 400px;
  height: 400px;
}

form {
  padding: 30px;
  border: 1px solid #ccc;
}

input[type="submit"] {
  width: 80px;
  background: #24b080;
  padding: 10px;
  border: 1px solid #24b080;
  cursor: pointer;
  color: white;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: all 0.3s ease-out;
  vertical-align: top;
}

input[type="submit"]:hover {
  background-color: #24b080;
  border: 2px solid #24b080;
  color: #fff;
  transform: scale(1.2, 1.2);
}

<form name="formulario" action="">
  <input type="submit" value="Send">
  <input type="submit" value="OK">
  <input type="submit" value="Cancel">
</form>

【讨论】：