Javascript 使用“变换缩放”属性时定位同级

我在一个分区上实现CSS转换属性，并且有一个根据缩放移动位于它旁边的兄弟节点的用例

我试着调整位置，但没有起作用，我想这就是变换的功能。我可能错了，所以想在这里再试一次

.parent{
显示器：flex；
}
奇尔达先生{
填充：1rem；
宽度：20雷姆；
背景：浅蓝色；
}
.奇尔达：停下来{
变换：尺度（5）；
变换原点：左上角；
z指数：0；
}
.childB{
边框：实心1px；
颜色：白色；
填充：1rem；
背景：红色；
z-index:1/*不知道为什么我也要这么做*/
}

儿童体重秤
缩放时我想移动

.parent{
显示器：flex；
}
奇尔达先生{
填充：1rem；
宽度：20雷姆；
背景：浅蓝色；
}
.奇尔达：停下来{
变换：尺度（5）；
变换原点：左上角；
z指数：0；
}
.childA:悬停+.childB{
转换：translateX（计算（22rem*4））；
}
.childB{
边框：实心1px；
颜色：白色；
填充：1rem；
背景：红色；
z指数：1
}

儿童体重秤
缩放时我想移动

.parent{
显示器：flex；
}
奇尔达先生{
填充：1rem；
宽度：20雷姆；
背景：浅蓝色；
}
.奇尔达：停下来{
变换：尺度（5）；
变换原点：左上角；
z指数：0；
}
.childA:悬停+.childB{
转换：translateX（计算（22rem*4））；
}
.childB{
边框：实心1px；
颜色：白色；
填充：1rem；
背景：红色；
z指数：1
}

儿童体重秤
缩放时我想移动

变换的影响类似于绝对位置，所以您可以增加宽度，并使用calc方法设置其增加的次数

.parent{
显示器：flex；
}
奇尔达先生{
填充：1rem；
宽度：20雷姆；
背景：浅蓝色；
}
.奇尔达：停下来{
宽度：计算（20rem*5）；/*在这里您可以更改5*/
变换原点：左上角；
}
.childB{
边框：实心1px；
颜色：白色；
填充：1rem；
背景：红色；
}

儿童体重秤
缩放时我想移动

变换的影响类似于绝对位置，所以您可以增加宽度，并使用calc方法设置其增加的次数

.parent{
显示器：flex；
}
奇尔达先生{
填充：1rem；
宽度：20雷姆；
背景：浅蓝色；
}
.奇尔达：停下来{
宽度：计算（20rem*5）；/*在这里您可以更改5*/
变换原点：左上角；
}
.childB{
边框：实心1px；
颜色：白色；
填充：1rem；
背景：红色；
}

儿童体重秤
缩放时我想移动

如果您能够调整html结构，则可以轻松地执行以下操作：

.parent{
显示器：flex；
}
.leftDiv{
背景：黄色
}
奇尔达先生{
填充：1rem；
背景：浅蓝色；
位置：相对位置；
}
.奇尔达：停下来{
变换：尺度（2）；
变换原点：左上角；
z指数：0；
}
childA:悬停，childB{
变换：比例（0.5）；
变换原点：左上角；
}
.childB{
边框：实心1px；
颜色：白色；
填充：1rem；
背景：红色；
位置：绝对位置；
左：100%；
排名：0；
底部：0；
空白：nowrap；
}

我就呆在这里
儿童体重秤
缩放时我想移动

如果您能够调整html结构，则可以轻松地执行以下操作：

.parent{
显示器：flex；
}
.leftDiv{
背景：黄色
}
奇尔达先生{
填充：1rem；
背景：浅蓝色；
位置：相对位置；
}
.奇尔达：停下来{
变换：尺度（2）；
变换原点：左上角；
z指数：0；
}
childA:悬停，childB{
变换：比例（0.5）；
变换原点：左上角；
}
.childB{
边框：实心1px；
颜色：白色；
填充：1rem；
背景：红色；
位置：绝对位置；
左：100%；
排名：0；
底部：0；
空白：nowrap；
}

我就呆在这里
儿童体重秤
缩放时我想移动

这将起作用，但变换是在浏览器渲染的合成阶段完成的。更改宽度将影响性能，因为它必须重新绘制。如果可能的话，总是尝试使用变换或不透明度来修改样式。是的，你是对的，但是我专门使用缩放属性来实现缩放效果，但是有了这个，我还需要更改子元素的样式。对，你到底想做什么？根据您希望它如何随比例移动，可能会影响方法。这会起作用，但变换是在浏览器渲染的合成阶段完成的。更改宽度将影响性能，因为它必须重新绘制。如果可能的话，总是尝试使用变换或不透明度来修改样式。是的，你是对的，但是我专门使用缩放属性来实现缩放效果，但是有了这个，我还需要更改子元素的样式。对，你到底想做什么？取决于您希望它如何随比例移动可能会影响方法。但是，我喜欢这种方法，我始终需要

childA

右侧的

childB

保持缩放

childA

啊，好的。最简单的解决办法可能是另一个答案。我将修补这些变换，并尝试使用性能更高的方法为您提供一致的解决方案。另一个解决方案是宽度？在这种情况下，我需要计算父元素A的所有子元素，并相应地增加宽度和高度，从而得到响应断点。但如果这是唯一可能的办法，我想我别无选择。22rem*scaleValue-1不，它不应该与视口有任何关系。但是，我喜欢这种方法，我总是需要

childA

右侧的

childB

保持缩放

childA

啊，好的。最简单的解决办法可能是另一个答案。我将修补这些变换，并尝试使用性能更高的方法为您提供一致的解决方案。另一个解决方案是宽度？在这种情况下，我需要计算父元素A的所有子元素，并相应地增加宽度和高度A