用两种方法实现一个点绕着另一个点旋转

CSS3方法

@keyframes,animation, transform三样便可以搞定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#center {
			10px;
			height: 10px;
			border-radius: 5px;
			background: #000;
			position: relative;
			margin: 200px auto;
		}
		#dot {
			 10px;
			height: 10px;
			background: red;
			position: absolute;
			border-radius: 5px;
			left: 200px;
			top: 0;

			-o-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			transform: rotate(90deg);

			-o-transform-origin: -2000%;
			-webkit-transform-origin: -2000%;
			-moz-transform-origin: -2000%;
			-ms-transform-origin: -2000%;
			transform-origin: -2000%;

			animation: rot 3s linear 0s infinite;
			-o-animation: rot 3s linear 0s infinite;
			-ms-animation: rot 3s linear 0s infinite;
			-webkit-animation: rot 3s linear 0s infinite;
			-moz-animation: rot 3s linear 0s infinite;
		}

		@keyframes rot {
			from{
				transform: rotate(0deg);
			}
			to{
				transform: rotate(360deg);
			}
		}
		@-o-keyframes rot {
			from{
				-o-transform: rotate(0deg);
			}
			to{
				-o-transform: rotate(360deg);
			}
		}
		@-webkit-keyframes rot {
			from{
				-webkit-transform: rotate(0deg);
			}
			to{
				-webkit-transform: rotate(360deg);
			}
		}
		@-moz-keyframes rot {
			from{
				-moz-transform: rotate(0deg);
			}
			to{
				-moz-transform: rotate(360deg);
			}
		}
		@-ms-keyframes rot {
			from{
				-ms-transform: rotate(0deg);
			}
			to{
				-ms-transform: rotate(360deg);
			}
		}
	</style>
</head>
<body>
	<div id="center">
		<div id="dot"></div>
	</div>
</body>
</html>

javascript

DEMO演示

Math.cos(), Math.sin(),这两个函数的参数都是弧度，所以可以用 Math.PI * 2/360 将角度转化成弧度。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#center {
			10px;
			height: 10px;
			border-radius: 5px;
			background: #000;
			position: relative;
			margin: 200px auto;
		}
		#dot {
			 10px;
			height: 10px;
			background: red;
			position: absolute;
			border-radius: 5px;
			left: 200px;
			top: 0;
		}
	</style>
</head>
<body>
	<div id="center">
		<div id="dot"></div>
	</div>

	<script type="text/javascript">
		var oDot = document.getElementById('dot');
		var deg = 0;
		var timer = null;
		var radius = oDot.offsetLeft; // 旋转半径

		timer = setInterval(function() {
			var radian = (2*Math.PI/360)*deg;
			var theTop = Math.ceil(Math.sin(radian)*radius);
			var theLeft = Math.ceil(Math.cos(radian)*radius);
			oDot.style.top = theTop + 'px';
			oDot.style.left = theLeft + 'px';
			deg += 0.5;
			if (deg === 361) {
				deg = 0;
			}
		},1);
	</script>
</body>
</html>