主页 / 问题 / 1212373
Accepted
Izzei -
Asked:2021-12-01 20:43:29 +0000 UTC2021-12-01 20:43:29 +0000 UTC

如何删除使用变换缩小的元素之间的填充：缩放？

  • 772

这是一个示例代码：

#wrapper {
  display: flex;
  width: 200px;
  
}

#first-child {
  width: 200px;
  height: 200px;
  background: yellow;
  transform: scale(0.5);
  transform-origin: left top;
}

#second-child {
  width: 200px;
  height: 200px;
  background: red;
  transform: scale(0.5);
  transform-origin: left top;
}
<div id="wrapper">
  <div id="first-child"></div>
  <div id="second-child"></div>
</div>
两个矩形之间有一些填充需要删除，这可能吗？

css

1 个回答

  1. Best Answer

    升级版：

    然后您可以对红色块使用相对定位并将其移动到黄色块：

    #wrapper {
  display: flex;
  width: 200px;
}
#first-child {
  width: 200px;
  height: 200px;
  background: yellow;
  transform: scale(0.5);
  transform-origin: left top;
}
#second-child {
  width: 200px;
  height: 200px;
  background: red;
  transform: scale(0.5);
  transform-origin: left top;
  position: relative;
  right: 50px;
}
    <div id="wrapper">
  <div id="first-child"></div>
  <div id="second-child"></div>
</div>

    目前尚不清楚“缩进”是什么意思。您希望它们彼此相邻吗？然后只需更改黄色块的属性transform-origin：

    #wrapper {
  display: flex;
  width: 200px;
}
#first-child {
  width: 200px;
  height: 200px;
  background: yellow;
  transform: scale(0.5);
  transform-origin: right top;
}
#second-child {
  width: 200px;
  height: 200px;
  background: red;
  transform: scale(0.5);
  transform-origin: left top;
}
    <div id="wrapper">
  <div id="first-child"></div>
  <div id="second-child"></div>
</div>

    • 2

相关问题