参考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. yum update

    Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的:代码如下:yum -y update升级所有包同时也升级软件和系统内核 代码如下:yum -y u ...

  2. jquery 自动调整图片大小

    <script type="text/javascript"> $(document).ready(function(){ $('#cons img').each(fu ...

  3. c++ 从一个BYTE[] *filePtr 追加二进制文件

    在顶部#include <fstream> 然后,在c盘新建一个txt文件,把后缀名更改为.dat,并且命名mp3Decode.dat //以二进制模式和在文件尾追加的方式打开文件 std ...

  4. 加密传输SSL协议1_OpenSSL的安装

    终于在自己不断的奋斗之后,来到科大的一波考试过去了,但是为了不使自己过于放松,回顾一下之前的东西,做一下笔记.所以新开一个专题笔记: Using Apache with SSL 引入:首先我们在平时的 ...

  5. mysql 数据库热备份

    https://www.percona.com/doc/percona-xtrabackup/2.2/index.html

  6. centos6安装vncserver实现图形化访问

    一.配置163的yum源 1.导入CentOS-6的GPG证书 #rpm --import http://mirrors.163.com/centos/RPM-GPG-KEY-CentOS-6 2.让 ...

  7. spoj COT2 - Count on a tree II 树上莫队

    题目链接 http://codeforces.com/blog/entry/43230树上莫队从这里学的,  受益匪浅.. #include <iostream> #include < ...

  8. Latex常用包笔记

    1.hyperref 标签包 \usepackage[colorlinks,linkcolor=black,anchorcolor=blue,citecolor=green]{hyperref} 2. ...

  9. 走进C标准库(8)——"string.h"中函数的实现相关字符串操作函数

    我的strcat: char *strcat(char *dest,char *src) { char * reval = dest; while(*dest) dest++; while(*src) ...

  10. 如何获取浏览器的DNS解析时间

    上一篇博客提到09年初WED团队开发的浏览器环境检测工具时,忘记说这个是aoao同学的创意了.不过没关系,据说他又在秘密规划新版本了,再据说新版要增加的DNS解析时间计算已经开发完成,点上面那个链接就 ...