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 = '<div class="hover panel"><div  id= "panel3" class="front"><div class="box1"><p>New Div</p></div></div></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;
}

<body onload="check()">


  <div id="wrapper" class="wrapper">
    <div id="first" class="col-box">
      <div class="hover panel">
        <div id="panel" class="front">
          <div class="box1">
            <p>Div 1</p>
          </div>
        </div>
      </div>
    </div>
    <div id="second" class="col-box">
      <div class="hover panel">
        <div id="panel2" class="front">
          <div class="box1">
            <p>Div 2</p>
          </div>
        </div>
      </div>
    </div>
    <div id="third" class="col-box">
      <div class="hover panel">
        <div id="panel3" class="front">
          <div class="box1">
            <p>Div 3</p>
          </div>
        </div>
      </div>
    </div>

    <div id="last" class="col-box">
      <div class="hover panel">
        <div id="panel4" class="front">
          <div class="box1">
            <p>Last Div</p>
          </div>
        </div>
      </div>
    </div>

    <button onclick="addDiv()">Add New Div</button>
  </div>

Well, like people have said - this isn't a great question for stackoverflow. It's not specific enough. It's really a whole ecosystem of things that you're asking about - and eventually - someone will close it... Read this: https://stackoverflow.com/help/how-to-ask --- but it's Saturday - and I don't get to write Vanilla javascript very often --- so, take this example - and maybe it will be of use on your journey. https://jsfiddle.net/sheriffderek/8eLggama — sheriffderek, Feb 24 '18 at 18:25
Thanks man! this will help a lot! I'm sorry if I did something wrong but I'm new and I didn't know that my question wasn't good enough. At this point I will just need to figure out how to change dynamically the rotateY value. Thank you so much! — superradio, Feb 24 '18 at 18:30
Some questions are just like this - for learning. But the goals is to have them be really specific so the answers can be very clear. See this example: https://stackoverflow.com/questions/5349425/whats-the-fastest-way-to-loop-through-an-array-in-javascript --- You could probably break your question up into 5 parts / or find answers in 5 parts. Anyway - everyone starts out with questions like this. Good luck! — sheriffderek, Feb 24 '18 at 18:36
Great suggestion, thanks for that. Do you think I should pick your answer as correct? — superradio, Feb 24 '18 at 18:39
That's kinda the point... my answer is not correct. I'm just kinda trying to tutor you a bit because I'm feeling OCD on stack overflow. This whole post will just recede into _the nothing_. BUT... if I were you... I'd leave it alone - and try and get a working version on your own - and then answer it yourself. : ) — sheriffderek, Feb 24 '18 at 18:46
OK. This isn't 'rotating' them in 3D - but it should get you in the right direction to see how to apply the calculations: https://jsfiddle.net/sheriffderek/pztvhn3L — sheriffderek, Feb 24 '18 at 19:31
Wow! thank you so much! I think at this point 90% of what I tried to achieve is there. All I need to do is to figure out how to force those divs to stay inside the gray container and to make them rotate accordingly to the distance and it's done. You have been so helpful! — superradio, Feb 24 '18 at 21:08
Hey! :) I think I managed to make it work, it must be super buggy but it works in a way. Is there anyway I can share the code? Thank you so much again without you I couldn't make it! — superradio, Feb 24 '18 at 22:17
What I normally do, when I create a cool UI pattern, is make a CodePen specifically to remember it for later - and to share — sheriffderek, Feb 25 '18 at 16:37

sheriffderek · Accepted Answer · 2018-02-24T19:31:51.767

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!

Hi thanks for your reply, I add new elements using js. `document.createElement('div');` I started over 3 times already. I'm not good at this yet and online I couldn't find any solution, Thanks for your time and help. — superradio, Feb 24 '18 at 16:59
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/18923216) — André Kool, Feb 24 '18 at 18:20
Thanks @AndréKool - that's a really helpful suggestion. : / — sheriffderek, Feb 24 '18 at 18:21
Thanks you have been very helpful, it's still hard for me to understand how to change the rotation of the cards, but you helped me a lot! Thanks again. — superradio, Feb 24 '18 at 18:56

RotateY of a group of divs dynamically

1 Answers1