CSS从一个特定的点开始缩放，而这个点在这个过程中可能会发生变化

Question

我正在尝试构建一个应用程序，在这个应用程序中，您可以用鼠标滚轮将一点放大到一个点，然后在另一点进一步放大。

换言之，缩放的"原点"可以在一路上发生变化。

看看这个例子：https://codesandbox.io/s/4w4m1k5zlx

var phase = 1;
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.style.transformOrigin = "0 0";
box2.style.transformOrigin = "0 0";
var width = 100;
var height = 100;
function transform(originX, originY, translateX, translateY, scale) {
transformElement(1, box1, originX, originY, translateX, translateY, scale);
transformElement(2, box2, originX, originY, translateX, translateY, scale);
}
function transformElement(
method,
element,
originX,
originY,
translateX,
translateY,
scale
) {
element.style.transition = "transform 1s linear";
if (method === 1) {
element.style.transform = `translate(${originX}px, ${originY}px) translate(${translateX}px, ${translateY}px) scale(${scale}) translate(-${originX}px, -${originY}px)`;
} else if (method === 2) {
element.style.transformOrigin = `${originX}px ${originY}px`;
element.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
}
var pointElement = document.createElement("div");
pointElement.classList.add("point");
pointElement.style.transform = `translate(${originX}px, ${originY -
2 * scale}px)`;
element.appendChild(pointElement);
}
function reset() {
resetElement(box1);
resetElement(box2);
}
function resetElement(element) {
while (element.children.length > 0) {
element.removeChild(element.children[0]);
}
element.style.transform = "";
element.style.transition = "";
void element.clientWidth;
}
function phase1() {
transform(width * 0.75, height / 2, 0, 0, 1.5);
}
function phase2() {
transform(width * 0.25, height / 2, 0, 0, 2);
}
function phase3() {
transform(width / 2, height, 0, 0, 2.5);
}
function phase4() {
transform(width / 2, 0, 0, 0, 3);
}
const phases = [reset, phase1, phase2, phase3, phase4];
setInterval(() => phases[phase++ % phases.length](), 1500);

* {
box-sizing: border-box;
}
body {
background-color: black;
}
.container {
position: relative;
margin: 60px;
background-color: lightgray;
width: 200px;
height: 200px;
}
.point {
width: 2px;
height: 2px;
background-color: white;
}
.box {
position: absolute;
top: 25%;
left: 25%;
transform-origin: 0 0;
background-color: teal;
opacity: 0.8;
width: 100px;
height: 100px;
}
.outline {
background-color: transparent;
border: 1px solid black;
}

<div class="container">
<div class="box outline">
</div>
<div id="box1" class="box"></div>
</div>
<div class="container">
<div class="box outline">
</div>
<div id="box2" class="box"></div>
</div>

示例中的顶部框：在这里，我尝试用transform模拟transform-origin，以便能够转换一个属性。然而，动画并不"均匀"，尤其是在第一个比例期间(它会再次放大和缩小一点——很难解释，但我希望你能看到(。

示例中的底部框：同时更改transform-origin和transform，它会变得非常跳跃，因为transform有一个转换，而transform-origin没有。

上面的例子是最理想的，但由于缩放不平滑，它看起来仍然不太好。如何在不进行平移的情况下缩放不同阶段的点？

Answer 1

我认为您能做的最好的事情就是依赖选项2。您可以对transform-origin应用转换，并对transform添加延迟，以便首先更改原点，然后进行转换：

transform 1s linear 0.5s, transform-origin 0.5s

完整代码：

var phase = 1;
var box2 = document.getElementById("box2");
box2.style.transformOrigin = "0 0";
var width = 100;
var height = 100;
function transform(originX, originY, translateX, translateY, scale) {
transformElement(2, box2, originX, originY, translateX, translateY, scale);
}
function transformElement(
method,
element,
originX,
originY,
translateX,
translateY,
scale
) {
element.style.transition = "transform 1s linear 0.5s,transform-origin 0.5s";
element.style.transformOrigin = `${originX}px ${originY}px`;
element.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
var pointElement = document.createElement("div");
pointElement.classList.add("point");
pointElement.style.transform = `translate(${originX}px, ${originY -
2 * scale}px)`;
element.appendChild(pointElement);
}
function reset() {
resetElement(box2);
}
function resetElement(element) {
while (element.children.length > 0) {
element.removeChild(element.children[0]);
}
element.style.transform = "";
element.style.transition = "";
void element.clientWidth;
}
function phase1() {
transform(width * 0.75, height / 2, 0, 0, 1.5);
}
function phase2() {
transform(width * 0.25, height / 2, 0, 0, 2);
}
function phase3() {
transform(width / 2, height, 0, 0, 2.5);
}
function phase4() {
transform(width / 2, 0, 0, 0, 3);
}
const phases = [reset, phase1, phase2, phase3, phase4];
setInterval(() => phases[phase++ % phases.length](), 1500);

* {
box-sizing: border-box;
}
body {
background-color: black;
}
.container {
position: relative;
margin: 50px;
background-color: lightgray;
width: 200px;
height: 200px;
}
.point {
width: 2px;
height: 2px;
background-color: white;
}
.box {
position: absolute;
top: 25%;
left: 25%;
transform-origin: 0 0;
background-color: teal;
opacity: 0.8;
width: 100px;
height: 100px;
}
.outline {
background-color: transparent;
border: 1px solid black;
}

<div class="container">
<div class="box outline">
</div>
<div id="box2" class="box"></div>
</div>

更新

考虑到选项1，放大/缩小效果是(我认为(，因为你正在使用两个平移(模拟transform-origin(，这两个平移围绕着你想要做的主变换。所以效果类似于：移动到点A，缩放元素，移动到点B。

这里有一个简单的例子来说明这种反弹效应的问题。我们可以清楚地看到一个轻微的向右然后向左的移动。

.box {
width:100px;
height:100px;
margin-left:200px;
background:red;
transition:2s all;
transform-origin:0 0;
}
body:hover .box{
transform:translate(100px,0) scale(2) translate(-100px,0);
}
body {
margin:0;
background:repeating-linear-gradient(to right,transparent 0px,transparent 98px,#000 98px,#000 100px)
}

<div class="box">
</div>

我们的目标是避免这种情况，并使元素在进行缩放时直接到达其最终位置。一个想法是将变换拆分为两部分。诀窍是应用一个带刻度的翻译，然后再应用另一个翻译。

这里有一个例子：

document.querySelector('body').addEventListener('mouseover',function(){
document.querySelector('.box').style.transform="scale(2) translate(-100px,0)";
setTimeout(function(){
document.querySelector('.box').style.transform="translate(100px,0) scale(2) translate(-100px,0)";
},500);
})
document.querySelector('body').addEventListener('mouseleave',function(){
document.querySelector('.box').style.transform="none";
})

.box {
width:100px;
height:100px;
margin-left:200px;
background:red;
transition:1s all linear .5s;
transform-origin:0 0;
}
body {
margin:0;
background:repeating-linear-gradient(to right,transparent 0px,transparent 98px,#000 98px,#000 100px)
}

<div class="box">
</div>

正如我们所看到的，我们不再有弹跳效应。红色div不再向右然后向左，而是只向左。这个想法在某种程度上是疯狂的，很难解释，但诀窍是使用延迟。

在悬停时，我们添加带有一个平移和缩放的变换，然后由于延迟，div不会移动。在延迟结束后，我们通过添加其他平移来更改变换。这将使div仅在考虑到我们用两种翻译模拟的新原点的情况下缩放。

---

这是完整的代码：

var phase = 1;
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var width = 100;
var height = 100;
function transform(originX, originY,  scale) {
transformElement(1, box1, originX, originY, scale);
transformElement(2, box2, originX, originY, scale);
}
function transformElement(
method,
element,
originX,
originY,
scale
) {
if (method === 1) {
element.style.transform =`scale(${scale}) translate(-${originX}px, -${originY}px)`;
setTimeout(function(){
				element.style.transform = `translate(${originX}px, ${originY}px) scale(${scale}) translate(-${originX}px, -${originY}px)`;
},200,element,scale,originX,originY)


} else if (method === 2) {
element.style.transformOrigin = `${originX}px ${originY}px`;
element.style.transform = ` scale(${scale})`;
}
var pointElement = document.createElement("div");
pointElement.classList.add("point");
pointElement.style.transform = `translate(${originX}px, ${originY -
2 * scale}px)`;
element.appendChild(pointElement);
}
function reset() {
resetElement(box1);
resetElement(box2);
}
function resetElement(element) {
while (element.children.length > 0) {
element.removeChild(element.children[0]);
}
element.style.transform = "";
element.style.transition = "";
void element.clientWidth;
}
function phase1() {
transform(width * 0.75, height / 2, 1.5);
}
function phase2() {
transform(width * 0.25, height / 2,  2);
}
function phase3() {
transform(width / 2, height,  2.5);
}
function phase4() {
transform(width / 2, 0,  3);
}
const phases = [reset, phase1, phase2, phase3, phase4];
setInterval(() => phases[phase++ % phases.length](), 1400);

* {
box-sizing: border-box;
}
.container {
position: relative;
display:inline-block;
margin: 50px;
background-color: lightgray;
width: 200px;
height: 200px;
}
.point {
width: 2px;
height: 2px;
background-color: white;
}
.box {
position: absolute;
top: 25%;
left: 25%;
transform-origin: 0 0;
background-color: teal;
opacity: 0.8;
width: 100px;
height: 100px;
transition:transform 1s linear 0.2s, transform-origin 0.2s;
}
.outline {
background-color: transparent;
border: 1px solid black;
}

<div class="container">
<div class="box outline">
</div>
<div id="box1" class="box"></div>
</div>
<div class="container">
<div class="box outline">
</div>
<div id="box2" class="box"></div>
</div>

我简化了JS，并保留了第一次尝试，即首先更改transform-origin以便进行比较。