动态调整Div组RotateY属性的脚本问题求助

嘿，很高兴你已经花了9天把这个基于现有脚本二次开发的功能推进到这一步了！针对你遇到的两个问题，我整理了实用的解决方案，帮你理顺思路：

默认情况下，<div>是块级元素，浏览器会自动给它换行。咱们可以通过CSS布局来改变这个行为，最推荐的是用Flex布局，简单又灵活：

/* 给所有Div的父容器添加这个样式 */
.div-parent-container {
  display: flex; /* 让子元素在同一行排列 */
  /* 可选：如果希望Div在容器宽度不够时自动换行，加上 flex-wrap: wrap; */
}

如果不想用Flex，也可以给每个目标Div设置display: inline-block;，但要注意这种方式会产生元素间的空白间距，需要额外处理（比如给父容器设font-size: 0;，再给子Div恢复正常字体大小）。

结合你脚本的核心功能（动态调整RotateY），咱们可以从两方面入手：

（1）用CSS直接控制间距 #

如果用了Flex布局，直接用gap属性就能轻松控制Div之间的距离：

.div-parent-container {
  display: flex;
  gap: 8px; /* 把这个值调小，Div就会更靠近，比如设为5px或者0 */
}

如果是其他布局，就用margin来调整，比如给每个Div设置margin-right: 8px;（最后一个Div可以删掉右边距）。

（2）关联脚本的旋转逻辑，确保新增Div也能被处理 #

你现在的脚本应该只在页面初始化或resize时处理了现有Div，新增的Div需要手动触发一次旋转计算。建议把旋转逻辑封装成独立函数，每次新增Div后调用它：

// 封装旋转更新的核心逻辑
function updateDivRotations() {
  const allDivs = document.querySelectorAll('.your-div-class');
  const container = document.querySelector('.div-parent-container');
  const containerCenter = container.offsetWidth / 2;

  allDivs.forEach(div => {
    // 计算当前Div相对于容器中心的距离
    const divCenter = div.offsetLeft + div.offsetWidth / 2;
    const distanceFromCenter = divCenter - containerCenter;
    // 根据距离动态调整rotateY（系数可以根据你的需求调整）
    const rotateYValue = -distanceFromCenter * 0.08;
    div.style.transform = `rotateY(${rotateYValue}deg)`;
  });
}

// 页面resize时触发旋转更新
window.addEventListener('resize', updateDivRotations);

// 新增Div的函数示例
function addNewDiv() {
  const container = document.querySelector('.div-parent-container');
  const newDiv = document.createElement('div');
  newDiv.classList.add('your-div-class');
  newDiv.textContent = '新Div';
  container.appendChild(newDiv);
  // 新增后立即更新旋转状态
  updateDivRotations();
}

这样一来，新增的Div不仅不会换行，还能自动适配你的旋转逻辑，位置也能通过CSS精准控制啦！

内容的提问来源于stack exchange，提问作者superradio