Question

我有一个div，我需要与所有孩子一起扩展。我使用CSS转换：scale（）来做到这一点。我还需要一个背景来填充它背后的容器，以便与它一起缩放，这是我手动完成的（如果我把它放在同一个被缩放的div中，背景就不会占据整页）。

缩放尺寸很容易，但是当我缩放div时，似乎也会改变它。我有一个与背景对齐的div。当两者都缩放时，div不再以相同的方式与背景对齐。你可以在这里看到我的意思：

＆＃13;

var scale = .5;

var container = document.querySelector(".container2");
var toTransform = document.querySelector(".toTransform2");


toTransform.style.transform = `scale(${scale})`;
container.style.backgroundImage = `radial-gradient(black ${4*scale}px, white ${4*scale}px)`;
container.style.backgroundSize = `${100*scale}px ${100*scale}px`;
container.style.backgroundPosition = `${0}px ${0}px`;

＆＃13;

.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  background-image: radial-gradient(black 4px, white 4px);
  background-size: 100px 100px;
  background-position:0px 0px;
  position: absolute;
  left:0px;
  top: 0px 
}
.container2 {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  position: absolute;
  left:595px;
  top: 0px 
}
.toTransform, .toTransform2 {
  width: 100%;
  height: 100%;
}
.child, .child2 {
  height: 100px;
  width: 100px;
  background: red;
  position: relative;
  top: 250px;
  left: 250px;
}

＆＃13;

<div class="container">
  <div class="toTransform">
    <div class="child">
    </div>
  </div>
</div>

<div class="container2">
  <div class="toTransform2">
    <div class="child2">
    </div>
  </div>
</div>

＆＃13;

我需要更改backgroundPosition属性，但我不知道如何确定需要应用多少。必须有一些数学，但我一直无法弄明白。有谁知道Scale最终如何翻译所有内容？

Answer 1

您应该查找transform-origin属性。

引用here和 here 。

transform-origin属性用于改变。的位置元素转化的起源。

变化：

.toTransform, .toTransform2 {
  width: 100%;
  height: 100%;
}

要：

.toTransform, .toTransform2 {
  width: 100%;
  height: 100%;
  transform-origin: top left; /* Add this */
}

var scale = .5;

var container = document.querySelector(".container2");
var toTransform = document.querySelector(".toTransform2");


toTransform.style.transform = `scale(${scale})`;
container.style.backgroundImage = `radial-gradient(black ${4*scale}px, white ${4*scale}px)`;
container.style.backgroundSize = `${100*scale}px ${100*scale}px`;
container.style.backgroundPosition = `${0}px ${0}px`;

.container {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  background-image: radial-gradient(black 4px, white 4px);
  background-size: 100px 100px;
  background-position: 0px 0px;
  position: absolute;
  left: 0px;
  top: 0px
}
.container2 {
  width: 500px;
  height: 500px;
  border: 1px solid black;
  position: absolute;
  left: 595px;
  top: 0px
}
.toTransform,
.toTransform2 {
  width: 100%;
  height: 100%;
  transform-origin: top left;
}
.child,
.child2 {
  height: 100px;
  width: 100px;
  background: red;
  position: relative;
  top: 250px;
  left: 250px;
}

<div class="container">
  <div class="toTransform">
    <div class="child">
    </div>
  </div>
</div>

<div class="container2">
  <div class="toTransform2">
    <div class="child2">
    </div>
  </div>
</div>

也许你可以理解这个简单例子中发生了什么：

body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
}
section {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  background-color: chartreuse;
}
section::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: darkorchid;
}
.el {
  width: 50px;
  height: 50px;
  background-color: coral;
  position: relative;
}
.el:not(:first-child) {
  transform: scale(2);
}
.el--two {
  transform-origin: center center;
  /* default, same as 50% 50% */
}
.el--three {
  transform-origin: top left;
}

<section>
  <div class="el el--one"></div>
  <div class="el el--two"></div>
  <div class="el el--three"></div>
</section>

如何应用平移：缩放时，我如何计算出div的变化？

1 个答案: