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

CSS3 旋转 太阳系的更多相关文章

  1. css3旋转倾斜3d小动画

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. css3旋转小三角

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 可控制转速CSS3旋转风车特效

    以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...

  4. css3旋转

    首先创建一个容器如div,然后设置其相关的3d属性,主要是三个1.perspective 透视,值越小3D感越强,值越大视觉正常.2.perspective-origin,透视点一般居于容器的中心.3 ...

  5. CSS3 旋转代码备忘

    .Aclose { -webkit-transition-property: all; -webkit-transition-duration: .3s; -moz-transition-proper ...

  6. CSS3旋转缩放移动倾斜等效果——transform

    1.transform浏览器支持情况 也就是说目前不考虑老浏览器的话是不用加前缀的,感谢菜鸟教程:https://www.runoob.com/cssref/css3-pr-transform.htm ...

  7. css3旋转、过渡、动画属性

    1.transform 该属性对元素进行旋转.缩放.移动和倾斜 translate元素从当前位置移动 rotate元素顺时针旋转 scale元素的尺寸增大或减小 skew元素翻转 2.transiti ...

  8. css3旋转立方体-_-

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. CSS3 旋转的八卦图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. OC语法6——内存管理之引用计数器（retain,release）

    OC内存管理: 一.引用计数器: Java有垃圾回收机制(Garbage Collection,GC).也就是说当我们创建对象后,不需要考虑回收内存的事,Java的垃圾回收机制会自动销毁该对象,回收它 ...

  2. Android学习笔记27：网格视图GridView的使用

    网格视图GridView的排列方式与矩阵类似,当屏幕上有很多元素(文字.图片或其他元素)需要按矩阵格式进行显示时,就可以使用GridView控件来实现. 本文将以一个具体的实例来说明如何使用GridV ...

  3. echarts 地图与时间轴混搭

    //常量定义public class Constant { public static Integer PM_YEAR_NO = 5; } //action public class ZhiBiaoP ...

  4. c++ containers

    顺序容器 array(C++11) vector string deque forward_list(C++11) list 容器适配器 stack queue priority_queue 关联容器 ...

  5. 简易 Ajax 入门案例

    AJAX = 异步 JavaScript 及 XML(Asynchronous JavaScript and XML) AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web ...

  6. const 用在函数后

    类的成员函数后面加 const,表明这个函数不会对这个类对象的数据成员(准确地说是非静态数据成员)作任何改变.C++支持常量性不同的重载,例如下面的GetData函数. #include " ...

  7. 手把手教程 Surface如何进行系统恢复？

    手把手教程 Surface如何进行系统恢复? 2015-01-29 05:53:00  [  中关村在线 原创  ]   作者: 周博林 |  责编:周博林 收藏文章 分享到 评论(10) Windo ...

  8. 製程能力介紹(SPC introduction) ─ Ck之製程能力解釋

    Ck之製程能力解釋 a=M-X: 代表規格中心(也就是製程之期望中心)與實際製造出來之群體中心的距離. b=T/2: 代表規格的一半. 所以,當Ck=a/b=M-X/(T/2)以文字來說明就是:實際作 ...

  9. JavaEE Tutorials (16) - Java消息服务概念

    16.1JMS API概述198 16.1.1什么是消息传送198 16.1.2什么是JMS API199 16.1.3何时使用JMS API199 16.1.4Java EE平台如何使用JMS AP ...

  10. poj1656---数黑格子

    题意:有white,black,test操作 black将给定范围涂黑,white将给定范围涂白,test将给定范围的黑格子数出来并且输出 思路:无论哪个操作格子范围都在  (x,y)  (x+L-1 ...