html5 扇形导航效果图,用css3 2D变形做扇形导航

Document

*{

margin: 0;

padding: 0;

}

html,body{

height: 100%;

overflow: hidden;

}

#wrap{

width: 50px;

height: 50px;

position: fixed;

border: 1px solid;

border-radius: 50%;

right: 10px;

bottom: 10px;

}

#wrap>.inner{

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

}

#wrap>.inner>img{

width: 40px;

height: 40px;

margin: 4px;

border-radius: 50%;

position: absolute;

}

#wrap>.home{

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

}

window.onload = function(){

var home = document.querySelector(".home");

var imgs = document.querySelectorAll("img");

var flag = true;

var c = 140;

home.onclick = function(){

if(flag){

this.style.transform = "rotate(-270deg)";

for(i = 0;i

imgs[i].style.transition="1s "+(i*0.1)+"s"

imgs[i].style.transform = "rotate(-270deg)";

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[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};

}

}