javascript - 如何使用 transform scale 属性在不改变边框的情况下分解盒子的内容？

Question

我正在尝试使用变换缩放属性制作动画以使盒子的内容变大。问题是盒子的边框也变大了。我只想更改内容的大小而不是边框​​。代码是这样的:

HTML:

<span id='box'>content</span>

CSS:

#box{
  position: absolute;
  left: 240px;
  border-bottom: 1px dashed white;
  width: 120px;
  height: 120px;
  text-align:center;
  font: bold 90px Tahoma;
  color: white;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.8s;
}
.explode{
  -webkit-transform: scale(1.2);
}

Javascript:

$('#box').addClass('explode');

所以问题是添加了class explode之后，盒子的边框也变大了。有什么方法可以在不改变边框的情况下只增加内容。

Answer 1

由于您向元素添加了边框，边框也会增加，因此您可以添加另一个带有 .wrap 类的跨度，它将包含边框并且不会缩放。

JSFiddle Demo

CSS:

#box{
  position: absolute;
  text-align:center;
  font: bold 90px Tahoma;
  color: white;
  width: 120px;
  height: 120px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.8s;
}
.explode{
  -webkit-transform: scale(1.2);
}
#wrap{
  position: absolute;
  left: 240px;
  width: 120px;
  height: 120px;
  border-bottom: 1px dashed black;
  width: 120px;
  height: 120px;
  display:inline-block;
}