参考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. Java学习之Java实现CallBack功能

    回调函数实际上就是在调用某个函数(通常是API函数)时,将自己的一个函数(这个函数为回调函数)的地址作为参数传递给那个函数.而那个函数在需要的时候,利用传递的地址调用回调函数,这时你可以利用这个机会在 ...

  2. Windows 去掉启动时的放大镜

    控制面板-轻松访问中心-使计算机更易于显示不勾选 启用放大镜

  3. android sdk 更新问题——截止2014年6月10日有效

    因为墙的原因,很多人的sdk都更新不了,下面记录了我刚刚实现更新的方法: 进到Android SDK Manager,菜单Tools->Options..,这时弹出一个框,在这个框的下面Othe ...

  4. Linux进程管理命令

    CentOS默认并没有安装上psmisc这个软件包,就是像pstree,fuser这类的命令就没有了.如果想要执行这些命令最好的方法就是手动的去安装它们 解决方法: yum -y install ps ...

  5. SQL Server 一些重要视图2

    1. sys.dm_tran_session_transactions 为每一个没有关闭的事务返回一行.session_id 可以与sys.dm_exec_connections.session_id ...

  6. INFOQ几篇论文

    http://www.infoq.com/cn/articles/java-profiling-with-open-source http://www.infoq.com/cn/articles/Vi ...

  7. poj2105---用指针对数组分块操作

    #include <stdio.h> #include <stdlib.h> ; int pow1(int a,int b) { ,i; ) ; ;i<b;i++) { ...

  8. Largest Rectangle in a Histogram（最大矩形面积，动态规划思想）

    Largest Rectangle in a Histogram Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  9. 愤怒的DZY（二分）

    愤怒的DZY[问题描述]“愤怒的小鸟”如今已经是家喻户晓的游戏了,机智的WJC最近发明了一个类似的新游戏:“愤怒的DZY”.游戏是这样的:玩家有K个DZY,和N个位于不同的整数位置:X1,X2,…,X ...

  10. cron 定时任务

    cron 是linux下的定时任务: M H D m d cmd.  这是一种cron文件格式.   M: 分钟(0-59). H:小时(0-23). D:天(1-31). m: 月(1-12). d ...