window.onload = function() {
var homeEle = document.querySelector(".home");
var imgs = document.querySelectorAll("#wrap > .inner > img");
var flag = true;
var c = 140;
homeEle.onclick = function() {
if (flag) {
this.style.transform = "rotate(-720deg)";
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.transition = "1s " + (i * 0.1) + "s"
imgs[i].style.transform = "rotate(-720deg)";
imgs[i].style.left = -getPoint(c, 90 * i / (imgs.length - 1)).left + "px";
imgs[i].style.top = -getPoint(c, 90 * i / (imgs.length - 1)).top + "px";
}
} else {
this.style.transform = "rotate(0deg)";
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.transition = "1s " + ((imgs.length - 1 - i) * 0.1) + "s";
imgs[i].style.transform = "rotate(0deg)"
imgs[i].style.left = 0 + "px";
imgs[i].style.top = 0 + "px";
}
}
flag = !flag;
}
function getPoint(c, deg) {
var x = Math.round(c * Math.sin(deg * Math.PI / 180));
var y = Math.round(c * Math.cos(deg * Math.PI / 180));
return {
left: x,
top: y
};
}
}