List rotation with limited elements

Question

I have div container with list (cards) inside. When I hover it, cards start to moving (translateX animation). container\'s width

Answer 1

Here is a simple technique that manipulates the Dom to create your desired effect

Javascript:

document.querySelector('.cards').addEventListener('mousedown', function(e) {
if (e.clientX < (this.offsetWidth >> 1)) {
    this.appendChild(this.removeChild(this.firstElementChild));
} else {
    this.insertBefore(this.lastElementChild, this.firstElementChild);
}}); 

then in you css use the nth-of-type selector to position elements as required. Here is your fiddle

If you are using mouseover you might need to wait for transitionend event before firing again.