参考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. SqlServer之存储过程

    存储过程最主要的特色:是当写完一个存储过程后即被翻译成可执行码存储在系统表 内,当作是数据库的对象之一,一般用户只要执行存储过程,并且提供存储过程所需的参数就可以得到所要的结果而不必再去编辑 T-SQ ...

  2. php汉字生成首字母

    function getfirstchar($s0){ $fchar = ord($s0{}); }); $s1 = iconv("UTF-8","gb2312" ...

  3. C++_转换转子(4种)

    static_cast const_cast dynamic_cast

  4. C++学习笔录2

    1.如果一个类要成为基类,那么它的成员变量声明成受保护的变量,既用关键字protected修饰. 2.处理共同继承产生的二义性:采用虚继承方式,当出现两个相同的成员时,编译器会自动删除其中一个.其方法 ...

  5. [转载]给10万pv的WordPress选择最便宜高可用的硬件以及WordPress高并发支持

    这些命令很长,但是希望可以让你很容易按照步骤创建一个全新的Linux服务器,使用Varnish, Nginx, W3 Total Cache, and WordPress来搭建一个WordPress博 ...

  6. [LeetCode]题解（python）：154-Find Minimum in Rotated Sorted Array II

    题目来源: https://leetcode.com/problems/find-minimum-in-rotated-sorted-array-ii/ 题意分析: 给定一个有重复的翻转的数组,找到最 ...

  7. PyCharm 2016.1 for Mac 激活方法分享

    内容如题,需要就参考一下,不需要请绕行!内容来自墙外我只是搬运工! 简单介绍一下步骤: 1.下载下面的压缩包并解压下来. http://files.cnblogs.com/files/korykim/ ...

  8. ios字符串计算高度总结

    1.用xib的话,设置约束的时候 不设置lable的高度即可,高度返回的就是最优高度. 2.用lable代码计算高度 CGFloat getHeightForLableString(NSString ...

  9. FIDO联盟：我们将杀死密码

    前不久发布的三星S5与iPhone 5S一样,配备了指纹识别技术.但更为重要的是,这一识别器可以与PayPal关连,进而与多种支付系统相连.通过这一过程,你很可能会摆脱密码,用指纹就可以畅游网络.当然 ...

  10. tomcat oracle 连接池配置

    <?xml version='1.0' encoding='utf-8'?> <Context displayName="zcgl" docBase=" ...