参考https://www.tadywalsh.com/web/cascading-solar-system/
首先 旋转有两种方式 一种是使用 transform-origin 另一种是transform: rotate(..) translateY();
用这个来理解transfrom-origin http://www.css88.com/tool/css3Preview/Transform.html
用origin原来做的时钟 http://jsbin.com/hetoli/10
以及用 后一种实现的太阳系 http://jsbin.com/fotoha/5
太阳系
/*两种环绕方式 */
/*推荐第一种 这一种是确定圆心 再确定半径 */
@-webkit-keyframes planet{
0% {
-webkit-transform: rotate(0deg) translateY(150px);
}
100% {
-webkit-transform: rotate(360deg) translateY(150px);
}
}
@-webkit-keyframes satellite{
0% {
-webkit-transform: rotate(0deg) translateY(50px);
}
100% {
-webkit-transform: rotate(360deg) translateY(50px);
}
} .solar{
margin-bottom: 100px;
padding: 100px 100px 200px 100px;
}
.sun{
height:100px;
width:100px;
line-height:100px;
border-radius:100%;
background:red;
position: relative;
left:100px;
top:100px;
}
.planet{
height: 50px;
width:50px;
position: relative;
top:25px;
left:25px;
background: blue;
border-radius:100%;
-webkit-animation: planet 15.8s infinite linear;
} .satellite{
height: 10px;
width:10px;
position: relative;
top:20px;
left:20px;
background: grey;
border-radius:100%;
-webkit-animation: satellite 5.8s infinite linear;
} @-webkit-keyframes planet2 {
0% {
-webkit-transform:rotate(0deg);
}
25%{
-webkit-transform:rotate(90deg);
}
50%{
-webkit-transform:rotate(180deg);
}
75%{
-webkit-transform:rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg) ;
}
} @-webkit-keyframes sate2 {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg) ;
}
}
#container{
padding: 100px 0 0 0;
height: 600px;
border: 1px solid black;
} .sun2{
height:100px;
width:100px;
left:calc(50% - 50px);
border-radius:100%;
background:red;
position: relative;
/* -webkit-animation: circle1 5.8s infinite linear; */
}
.planet2{
height: 50px;
width:50px;
position:relative;
top: 150px;
left: 25px;
/*先确定好行星位置(也就是环上某一个点得位置)*/
border-radius:100%;
background: pink;
/*再确定圆心*/
transform-origin: center -100px;
-webkit-animation: planet2 11.8s infinite linear;
} .sate2{
height: 10px;
width:10px;
position: relative;
top:60px;
left: 20px;
background: grey;
border-radius:100%;
/*确定圆心*/
transform-origin: center -35px;
-webkit-animation: sate2 1.8s infinite linear;
}
/*
transform-origin: center 1px 相当于在B这个元素的x方向的50% 和 y方向的1px 处打了一个钉子
然后就绕这个钉子转 我们希望是绕着太阳 转 因此需要计算太阳 的中心点相对于行星左上角的偏移位置 也就是 50 50
*/
HTML结构
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[CSS3 ROTATE simple solar sys]">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body> <div class="solar">
<div class="sun">
<div class="planet">
<div class="satellite"> </div>
</div>
</div>
</div> <hr>
<div id="container">
<div class="sun2">
<div class="planet2">
<div class="sate2"></div>
</div>
</div> </div> </body>
</html>