RotateY of a group of divs dynamically

Question

I'm working on this script since 9 days, I found the script online, and from there I tried to add some code. The point of the script is to rotate the Div dynamically based on the distance they have between each other. In a way it works, if you resize the page at some point the divs turn their Y axes. I have mainly 2 problems, the first one is that if I add new divs they just are shown in a new line. The second problem is that those divs position should change, they need to get closer and they should move to the left side of the div. I hope somebody can help because I spent already 10 days on this and I can't find a solution. Thank you so much

function myFunction(distance) {
  //add browser check currently it set for safari
  // Code for Safari
  var degree = 0;
  if (distance <= -1 && distance >= -5) {
    degree = 15;
  } else if (distance < -5 && distance >= -10) {
    degree = 25;
  } else if (distance < -10 && distance >= -15) {
    degree = 30;
  } else if (distance < -15 && distance >= -20) {
    degree = 35;
  } else if (distance < -20) {
    degree = 45;
  }

  document.getElementById("panel").style.WebkitTransform = "rotateY(" + degree + "deg)";
  document.getElementById("panel2").style.WebkitTransform = "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.WebkitTransform = "rotateY(45deg)"; 
  //    document.getElementById("panel6").style.WebkitTransform = "rotateY(45deg)";
  // Code for IE9
  //    document.getElementById("asd").style.msTransform = "rotateY(20deg)"; 
  // Standard syntax
  //    document.getElementById("asd").style.transform = "rotateY(20deg)"; 
}

function myFunctionb() {
  document.getElementById("panel").style.WebkitTransform = "rotateY(0deg)";
  document.getElementById("panel2").style.WebkitTransform = "rotateY(0deg)";
  document.getElementById("panel3").style.WebkitTransform = "rotateY(0deg)";
  document.getElementById("panel4").style.WebkitTransform = "rotateY(0deg)";
  //    document.getElementById("panel5").style.WebkitTransform = "rotateY(0deg)"; 
  //    document.getElementById("panel6").style.WebkitTransform = "rotateY(0deg)";

}

//    need to find a better solution
var first = document.getElementById("panel");
var second = document.getElementById("panel2");
var lastpanel = document.getElementById("panel4");
var lastbox = document.getElementById("last");
var container = document.getElementById("wrapper");
var notcongainer = container.offsetLeft;

var distance = container.offsetWidth - (lastpanel.offsetWidth + lastbox.offsetLeft + 4) + notcongainer;

console.log(distance);

var myVar;
var minDistance = 10;

function check() {
  myVar = setInterval(testcheck, 100);
}


//    First I check that the boxes lenght are as much as the container
//    Then I check the distance between 2 boxes


function testcheck() {
  if (distance < minDistance) {
    myFunction(distance);
  } else {
    myFunctionb();
  }
  distance = container.offsetWidth - (lastpanel.offsetWidth + lastbox.offsetLeft + 4) + notcongainer;
  /*console.log(distance)*/
}


//ADD NEW DIV    
function addDiv() {
  var div = document.createElement('div');
  div.className = "col-box";
  div.id = "newId";
  div.innerHTML = 'New Div';
  document.getElementById('wrapper').appendChild(div);
}

body {
  background-color: #ecf0f1;
  margin: 20px;
  font-family: Arial, Tahoma;
  font-size: 20px;
  color: #666666;
  text-align: center;
}

p {
  color: #ffffff;
}

.col-box {
  width: 22%;
  position: relative;
  display: inline;
  display: inline-block;
  margin-bottom: 20px;
  z-index: 1;
}

.end {
  margin-right: 0 !important;
}


/*-=-=-=-=-=-=-=-=-=-=- */


/* Flip Panel */


/*-=-=-=-=-=-=-=-=-=-=- */

.wrapper {
  width: 80%;
  height: 200px;
  margin: 0 auto;
  background-color: #bdd3de;
  hoverflow: hidden;
  border: 1px;
}

.panel {
  margin: 0 auto;
  height: 130px;
  position: relative;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
}

.panel .front {
  text-align: center;
}

.panel .front {
  height: inherit;
  position: absolute;
  top: 0;
  z-index: 900;
  text-align: center;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.panel.flip .front {
  -webkit-transform: rotateY(45deg);
  -moz-transform: rotateY(180deg);
}

.col-box:hover {
  z-index: 1000;
}

.box1 {
  background-color: #14bcc8;
  width: 160px;
  height: 60px;
  margin-left: 5px;
  padding: 20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

sheriffderek · Accepted Answer

9 days... that's too long. Time to step back and break this up into smaller things.

This isn't an 'answer' yet... but I need to post an image for you. Your question wasn't that clear, but it's not an easy thing to explain. In your case, I would show an image.

Now that I can see what you're doing - it doesn't sound like an arbitrary and completely silly task.

You have a list of 'things' or 'cards' or whatever... so, first things first... how do you insert new DOM into the page - and / into that list - and have the list all on one line. A few ways - but most likely you can just use flexbox -

https://jsfiddle.net/sheriffderek/8eLggama -> https://jsfiddle.net/sheriffderek/pztvhn3L (this is an example - but it's pretty naive - and the further you take this, the closer you'll get to building what most frameworks - like Vue could do way better... but good for learning! Start with something small - to just do that.

// 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'});
});

...and then you maybe absolute position the card inside of that list item? It's certainly a unique thing to do, and wont be easy. Then, you can check the number of items - of the width of each item - and make a calculation for transform based on that? Good luck!

RotateY of a group of divs dynamically

Answers (1)

Related Questions