1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| var items, lenght, deg, z, move = 0;
var bouton = document.getElementById('buttonCaroussel');
function load(){
items = document.getElementsByClassName('itemcaroussel');
lenght = items.length;
deg = 360 / lenght;
z = (items[0].offsetWidth/2) / Math.tan((deg/2) * (Math.PI/180));
for(var i = 0; i <lenght; i++){
items[i].style.transform = "rotateY("+(deg*i)+"deg) translateZ("+z+"px)";
}
}
window.addEventListener('load', load);
bouton.addEventListener('click', function(){
move += 1;
for(var i=0; i < lenght; i++) {
items[i].style.transform = "rotateY("+(deg*(i+move))+"deg) translateZ("+z+"px)";
}
}); |
Partager