SOURCE

var 
	x = [],
	p = [],
	n1 = 0,
	n2 = 0,
	n3 = 0,
	n4 = 0,
 	ny=0, 
 	rotINT = [],
 	pINT = [];

(function() {
	for(var i = 1; i < 4; i++) {
		(function(index){
			x[index] = document.getElementById("rotate" + index);
			p[index] = document.getElementById("p" + index);
			clearInterval(pINT[index]);
			clearInterval(rotINT[index]);
			rotINT[index] = setInterval("startRotate("+index+")",5)
			pINT[index] = setInterval("startRotate("+index+")",5)
		})(i)
	}
})()

function startRotate(i) {

	
	switch(i) {
		case 1: 
			n1 += 1;
			x[i].style.transform="rotate(" + n1 + "deg)"
			x[i].style.transformOrigin = "100% 50%";
			p[i].style.transform="rotate(-" + n1 + "deg)"
			p[i].style.transformOrigin = "50% 20%";
			if(n1 == 180) {
				clearInterval(rotINT[i]);
				clearInterval(pINT[i]);
				n1 = 0;

			}
			break;

		case 2:
			n2 += 1;
			x[i].style.transform="rotate(" + n2 + "deg)"
			x[i].style.transformOrigin = "100% 100%";
			p[i].style.transform="rotate(-" + n2 + "deg)"
			p[i].style.transformOrigin = "50% 200%";
			if(n2 == 180) {
				
				clearInterval(rotINT[i]);
				clearInterval(pINT[i]);
				n2 = 0;
			}
			break;

		case 3:
			n3 += 1;
			x[i].style.transform="rotate(" + n3 + "deg)"
			x[i].style.transformOrigin = "50% 100%";
			p[i].style.transform="rotate(-" + n3 + "deg)"
			p[i].style.transformOrigin = "35% 200%";
			if(n3 == 180) {
				clearInterval(rotINT[i]);
				clearInterval(pINT[i]);
				
				n3 = 0;
			}
			break;

		default:
	}
  	
}

  <div id="rotate1"><p id="p1">2D 旋转1</p></div>
	<div id="rotate2"><p id="p2">2D 旋转2</p></div>
	<div id="rotate3"><p id="p3">2D 旋转3</p></div>
	<div id="rotate4"><p id="p4">2D 旋转4</p></div>

  #rotate1 {
	  position: absolute;
	  top: 110px;
	  left: 110px;
	  width: 100px;
	  height: 100px;
	  background-color: blue;
	}

	#rotate2 {
		position: absolute;
	  top: 110px;
	  left: 110px;
	  width: 100px;
	  height: 100px;
	  background-color: red;
	}

	#rotate3 {
		position: absolute;
	  top: 110px;
	  left: 110px;
	  width: 100px;
	  height: 100px;
	  background-color: yellow;
	}

	#rotate4 {
		position: absolute;
	  top: 110px;
	  left: 110px;
	  width: 100px;
	  height: 100px;
	  background-color: orange;
	}