Javascript 一组div的动态旋转

我从9天开始就在编写这个脚本，我在网上找到了这个脚本，并试图从那里添加一些代码。 脚本的要点是根据Div之间的距离动态旋转Div。 在某种程度上，如果在某个点调整页面大小，div将旋转其Y轴。 我主要有两个问题，第一个问题是，如果我添加新的div，它们只会显示在新行中。 第二个问题是，这些div的位置应该改变，它们需要靠近div，并且应该移到div的左侧。 我希望有人能帮上忙，因为我已经花了10天的时间在这件事上，我找不到解决办法。 多谢各位

函数myFunction（距离）{
//添加当前为safari设置的浏览器检查
//Safari的代码
var度=0；
如果（距离=-5）{
学位=15；
}否则如果（距离<-5和距离>=-10）{
学位=25；
}否则如果（距离<-10和距离>=-15）{
学位=30；
}否则如果（距离<-15和距离>=-20）{
学位=35；
}否则，如果（距离<-20）{
度=45；
}
document.getElementById（“panel”）.style.webkittTransform=“rotateY”（“+degree+”deg）”；
document.getElementById（“panel2”）.style.webkittTransform=“rotateY”（+degree+“deg”）；
document.getElementById（“panel3”）.style.WebkitTransform=“rotateY（“+degree+”deg）”；
document.getElementById（“panel4”）.style.WebkitTransform=“rotateY（“+degree+”deg）”；
//document.getElementById（“panel”）.style.marginRight=“100px”；
document.getElementById（“panel2”）.style.marginRight=“300px”；
document.getElementById（“panel3”）.style.marginRight=“30px”；
document.getElementById（“panel4”）.style.marginRight=“30px”；
//document.getElementById（“panel5”）.style.webkitttransform=“rotateY（45度）”；
//document.getElementById（“panel6”）.style.webkitttransform=“rotateY（45度）”；
//IE9代码
//document.getElementById（“asd”）.style.msTransform=“rotateY（20deg）”；
//标准语法
//document.getElementById（“asd”）.style.transform=“rotateY（20deg）”；
}
函数myFunctionb（）{
document.getElementById（“panel”）.style.webkittTransform=“rotateY（0deg）”；
document.getElementById（“panel2”）.style.webkitttransform=“rotateY（0deg）”；
document.getElementById（“panel3”）.style.webkitttransform=“rotateY（0deg）”；
document.getElementById（“panel4”）.style.webkittTransform=“rotateY（0deg）”；
//document.getElementById（“panel5”）.style.webkitttransform=“rotateY（0deg）”；
//document.getElementById（“panel6”）.style.webkitttransform=“rotateY（0deg）”；
}
//需要找到更好的解决方案
var first=document.getElementById（“面板”）；
var second=document.getElementById（“panel2”）；
var lastpanel=document.getElementById（“panel4”）；
var lastbox=document.getElementById（“last”）；
var container=document.getElementById（“包装器”）；
var notcongainer=container.offsetLeft；
变量距离=container.offsetWidth-（lastpanel.offsetWidth+lastbox.offsetLeft+4）+notcongainer；
控制台日志（距离）；
var-myVar；
var-minDistance=10；
函数检查（）{
myVar=设置间隔（testcheck，100）；
}
//首先，我检查箱子的长度是否与容器的长度相同
//然后我检查两个盒子之间的距离
函数testcheck（）{
if（距离<距离）{
myFunction（距离）；
}否则{
myFunctionb（）；
}
距离=container.offsetWidth-（lastpanel.offsetWidth+lastbox.offsetLeft+4）+notcongainer；
/*控制台日志（距离）*/
}
//添加新DIV
函数addDiv（）{
var div=document.createElement（'div'）；
div.className=“col-box”；
div.id=“newId”；
div.innerHTML=“新div
”；
document.getElementById（'wrapper'）.appendChild（div）；
}

正文{
背景色：#ecf0f1；
利润率：20px；
字体系列：Arial，Tahoma；
字体大小：20px；
颜色：#666666；
文本对齐：居中；
}
p{
颜色：#ffffff；
}
.col box{
宽度：22%；
位置：相对位置；
显示：内联；
显示：内联块；
边缘底部：20px；
z指数：1；
}
.完{
右边距：0！重要；
}
/*-=-=-=-=-=-=-=-=-=-=- */
/*翻转面板*/
/*-=-=-=-=-=-=-=-=-=-=- */
.包装纸{
宽度：80%；
高度：200px；
保证金：0自动；
背景色：#bdd3de；
悬停流：隐藏；
边界：1px；
}
.小组{
保证金：0自动；
高度：130像素；
位置：相对位置；
-webkit透视图：600px；
-moz透视图：600px；
}
.面板.正面{
文本对齐：居中；
}
.面板.正面{
身高：继承；
位置：绝对位置；
排名：0；
z指数：900；
文本对齐：居中；
-webkit变换：rotateX（0度）rotateY（0度）；
-moz变换：rotateX（0度）rotateY（0度）；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-webkit过渡：全部。4s易入易出；
-moz过渡：全部。4轻松输入输出；
-ms过渡：全部。4轻松进出；
-o-transition：全部。4s易于输入输出；
过渡：全部。4s轻松进出；
}
.面板.翻转.正面{
-webkit变换：旋转（45度）；
-莫兹变换：旋转（180度）；
}
.col框：悬停{
z指数：1000；
}
.box1{
背景色：#14bcc8；
宽度：160px；
高度：60px；
左边距：5px；
填充：20px；
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
}

第一组

第2组

第3组

最后一课

添加新Div

9天。。。太长了。是时候退一步，把它分解成更小的东西了

这还不是一个“答案”。。。但我需要给你贴张照片。你的问题不是很清楚，但解释起来并不容易。在你的情况下，我会显示一个图像

// will take an object with the list name and the card id
// eventuallly - you'd want the card to have more info sent in...
function addCard(infoObject) {
  var targetList = document.getElementById(infoObject.list);
  var li = document.createElement('li');
  li.classList.add('item');
  // ug! why aren't I using jQuery...
  var component = document.createElement('aside');
  component.classList.add('card');
  var title = document.createElement('h2');
  var uniqueId = idMaker.create();
  var id = document.createTextNode(uniqueId);
  title.appendChild(id);
  component.appendChild(title)
  li.appendChild(component);
  targetList.appendChild(li);
  // woah... this part is really boring...
  // this is why templating engines and JSON are so popular
  // you could also add 'remove' button etc... right?
  var removeButton = document.createElement('button');
  var removeText = document.createTextNode('x');
  removeButton.appendChild(removeText);
  removeButton.classList.add('remove-card');
  component.appendChild(removeButton);
    //
  removeButton.addEventListener('click', function() {
    var parent = document.getElementById(infoObject.list);
    idMaker.removed.push(uniqueId);
    parent.removeChild(li);
    idMaker.read();
  });
}

// start out with a few?
addCard({list: 'exampleTarget'});
addCard({list: 'exampleTarget'});
addCard({list: 'exampleTarget'});

// start a UI to add cards
var addCardButton = document.querySelector('[data-trigger="add-card"]');

addCardButton.addEventListener('click', function() {
  addCard({list: 'exampleTarget'});
});