扇形导航

今天刚学习了CSS 3的过度属性和2D变换，课后做了一个简单的小练习。

CSS：

<style>
			*{
				margin: 0;
			}
			.wrap{
				position: fixed;
				width: 50px;
				height: 50px;
				right: 20px;
				bottom: 20px;
			}
			.wrap img{
				position: absolute;
				transition: 1s all;
				left: 0;
				top: 0;
			}
			.home{
				width: 50px;
				height: 50px;
				background: url(img/home.png) no-repeat;
				position: absolute;
				left: 0;
				top: 0;
				transition: 1s all;
				/*-webkit-transform: rotate(360deg);*/
			}
		</style>

这段代码-webkit-transform: rotate(360deg);中的rotate就是旋转的意思，里面的参数就是旋转的角度。

transform属性让元素在一个坐标系统中变形，包含了一系列变形函数，可以移动，旋转和缩放元素。

transform:none|<transform-function>

可用于内联元素和块元素。其默认值为none，表示元素不进行变形。属性值transform-function,表示一个或多个变形函数，以空格分开。例如rotate,scale,translate等。需要注意的时，在transform中使用过多个transform-function时却需要用空格隔开。

HTML：

<div class="wrap" id="wrap">
			<img src="img/clos.png" />
			<img src="img/full.png" />
			<img src="img/open.png" />
			<img src="img/prev.png" />
			<img src="img/refresh.png" />
			
			<div class="home" id="home">
				
			</div>
			
		</div>

对于命名的格式我也需要多去学习，多去看。

JS:

<script>
			var oHome = document.getElementById("home")
			var oImg = document.getElementById("wrap").getElementsByTagName("img")
			var onOff = true
			var iR = -150
			oHome.onclick = function(){
				if(onOff){
					this.style.webkitTransform = "rotate(360deg)"
					for (var i=0;i<oImg.length;i++) {
						var iLt = toChage(iR,90/4*i)
//						console.log(iLt)
						oImg[i].style.left = iLt.left+"px"
						oImg[i].style.top = iLt.top+"px"
						oImg[i].style.webkitTransform = "rotate(-720deg)"
					}
					
					
					onOff = false
				}else {
					this.style.webkitTransform = "rotate(0deg)"
					for (var i=0;i<oImg.length;i++) {
						
						oImg[i].style.transition = "0.5s "+(oImg.length-1-i)*100+"ms"
//						console.log(oImg[i].style.transition)
						oImg[i].style.left = 0+"px"
						oImg[i].style.top = 0+"px"
						oImg[i].style.webkitTransform = "rotate(-720deg)"
					}
					
					
					
					onOff = true
				}
			}
			
			function toChage(iR,iRotate){
				var l = Math.round(Math.sin(iRotate/180*Math.PI)*iR)
				var t = Math.round(Math.cos(iRotate/180*Math.PI)*iR)
				return {
					left:l,
					top:t
				}
			}
			
			
		</script>

这里的toChage函数是为了求出每张图片的出现的位置，其中IR是半径，IRotate是角度的意思，通过sin,cos求出他们的left和top值