CSS3 旋转太阳系

浏览数：19 / 时间：2015年06月09日

参考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

太阳系

/*两种环绕方式 */
/*推荐第一种  这一种是确定圆心 再确定半径  */
@-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>