CSS3 uses transform deformation combined with events to complete fan-shaped navigation

Because I wrote the word transition incorrectly in this case, I spent an entire afternoon on it. It really made me blind. I will never make such a stupid mistake again >_<

1. Knowledge point analysis

1. APDiv positioning layout

2. The effects of transition and transform under click events.

3. Calculation of the left and top values of each small icon.

4. After clicking the small icon, listen to the icon's transition event.

2. HTML source code

<div id="stage">
  <div id="nav"> 
      <img src="images/1.png"> 
      <img src="images/2.png"> 
      <img src="images/3.png"> 
      <img src="images/4.png"> 
      <img src="images/5.png"> 
  </div>
  <div id="home"> <img src="images/home.png"> </div>
</div>

3. CSS style

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

4. JavaScript source code

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;
	
	//When the mouse clicks each small icon for(var i=0;i<imgLen;i++){
		aImg[i].onclick=function(){
			this.style.transition="0.2s";
			this.style.transform="scale(1.2) rotate(720deg)";
			this.style.opacity=0.1;
			addEnd(this,end); //Add an event listener every time a small image is clicked. When the event ends, the end function is executed.
			}
		}
	//When the event ends, execute the end function, restore the default value, and remove the event listener.
	function end(){
		this.style.transition="0.1s";
		this.style.transform="scale(1) rotate(720deg)";
		this.style.opacity=1;
		removeEnd(this,end); 
		}
	
	//When you click the home icon, the first time it rotates clockwise, and the second time it rotates counterclockwise.
	oHome.onclick=function(){
		if(onOff)
		{
			this.style.transform="rotate(360deg)";
			//Set the left and top values of each image.
			for(var i=0;i<imgLen;i++){
				// has a starting angle of 30 degrees.
				var oLt=getLeftTop(iR,120/(imgLen-1)*i+30);
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				// Each image has a delay of 100ms.
				aImg[i].style.transition="0.5s ease-in-out "+100*i+"ms";
				aImg[i].style.transform="scale(1) rotate(720deg)";
				}
			
			}
		else
		{
			this.style.transform="rotate(0deg)";
			for(var i=0;i<imgLen;i++){
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				//The pictures are retrieved in reverse order. Each image has a 100ms delay.
				aImg[i].style.transition="0.5s ease-in-out "+100*(imgLen-i-1)+"ms";
				
				aImg[i].style.transform="scale(1) rotate(0deg)";
				}
			}
		onOff=!onOff;
		
	}
	
}	
	
	
	//Get the left and top values of the img image. Pythagorean theorem, given the included angle and hypotenuse, get the length of the opposite side: sin(radians)*hypotenuse. Length of the side: cos(radians)*hypotenuse. Radians = degrees/180*pi.
	function getLeftTop(iR,iDeg){
		var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
		var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
		//When returning two values, use the object method.
		return {
			"l":ileft,
			"t":iTop
			}
		}
	//Add end and remove end functions. Listen for transition events.
	function addEnd(obj,fn){
		obj.addEventListener("transitionend",fn,false);
		}
	function removeEnd(obj,fn){
		obj.removeEventListener("transitionend",fn,false);
		}

Complete page code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Circular Navigation</title>
<style>
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%;
}
</style>
<script>
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;
	
	//When the mouse clicks each small icon for(var i=0;i<imgLen;i++){
		aImg[i].onclick=function(){
			this.style.transition="0.2s";
			this.style.transform="scale(1.2) rotate(720deg)";
			this.style.opacity=0.1;
			addEnd(this,end); //Add an event listener every time a small image is clicked. When the event ends, the end function is executed.
			}
		}
	//When the event ends, execute the end function, restore the default value, and remove the event listener.
	function end(){
		this.style.transition="0.1s";
		this.style.transform="scale(1) rotate(720deg)";
		this.style.opacity=1;
		removeEnd(this,end); 
		}
	
	//When you click the home icon, the first time it rotates clockwise, and the second time it rotates counterclockwise.
	oHome.onclick=function(){
		if(onOff)
		{
			this.style.transform="rotate(360deg)";
			//Set the left and top values of each image.
			for(var i=0;i<imgLen;i++){
				// has a starting angle of 30 degrees.
				var oLt=getLeftTop(iR,120/(imgLen-1)*i+30);
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				// Each image has a delay of 100ms.
				aImg[i].style.transition="0.5s ease-in-out "+100*i+"ms";
				aImg[i].style.transform="scale(1) rotate(720deg)";
				}
			
			}
		else
		{
			this.style.transform="rotate(0deg)";
			for(var i=0;i<imgLen;i++){
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				//The pictures are retrieved in reverse order. Each image has a 100ms delay.
				aImg[i].style.transition="0.5s ease-in-out "+100*(imgLen-i-1)+"ms";
				
				aImg[i].style.transform="scale(1) rotate(0deg)";
				}
			}
		onOff=!onOff;
		
	}
	
}	
	
	
	//Get the left and top values of the img image. Pythagorean theorem, given the included angle and hypotenuse, get the length of the opposite side: sin(radians)*hypotenuse. Length of the side: cos(radians)*hypotenuse. Radians = degrees/180*pi.
	function getLeftTop(iR,iDeg){
		var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
		var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
		//When returning two values, use the object method.
		return {
			"l":ileft,
			"t":iTop
			}
		}
	//Add end and remove end functions. Listen for transition events.
	function addEnd(obj,fn){
		obj.addEventListener("transitionend",fn,false);
		}
	function removeEnd(obj,fn){
		obj.removeEventListener("transitionend",fn,false);
		}
	

</script>
</head>

<body>
<div id="stage">
  <div id="nav"> <img src="images/1.png"> <img src="images/2.png"> <img src="images/3.png"> <img src="images/4.png"> <img src="images/5.png"> </div>
  <div id="home"> <img src="images/home.png"> </div>
</div>
</body>
</html>

The above is the details of how CSS3 uses transform deformation combined with events to complete fan-shaped navigation. For more information about CSS3 fan-shaped navigation, please pay attention to other related articles on 123WORDPRESS.COM!

<<: Layui implements sample code for multi-condition query

>>: Detailed explanation of the basic use of Apache POI