这个案例因为写错了一个transition的单词，害得我花了一个下午的时间，真的眼睛都瞎了，以后不要再犯这种低级错误 >_<

一、知识点分析

1、APDiv定位布局

2、点击事件下的transition和transform的效果。

3、每个小图标的left和top值的计算。

4、点击小图标后图标的transition事件侦听。

二、HTML源代码

三、CSS样式

body {	margin: 0;}body{	background-color:#eee;}#stage {	width: 300px;	height: 300px;	position: relative;	top: 150px;	margin: 0 auto;}#nav {	position: absolute;	width: 120px;	height: 107px;	left: 50%;	margin-left: -60px;	top: 50%;	margin-top: -53px;}#nav img {	width: 100%;	position: absolute;	left: 0;	top: 0;	cursor: pointer;}#home {	position: absolute;	width: 150px;	height: 134px;	left: 0;	top: 0;	right: 0;	bottom: 0;	margin: auto;	cursor: pointer;	transition: 0.5s ease-in-out;	}#home img {	width: 100%;}

四、JavaScript源代码

window.onload=function(){	var oHome=document.getElementById("home");	var oNav=document.getElementById("nav");	var aImg=oNav.getElementsByTagName("img");	var imgLen=aImg.length;	var onOff=true;	var iR=-260;		//鼠标点击每个小图标的时候	for(var i=0;i
完整页面代码
  
      
  
  
以上就是css3利用transform变形结合事件完成扇形导航的详细内容，更多关于css3 扇形导航的资料请关注本站其它相关文章！