参考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. 在 IIS 中配置 ASP.NET 应用程序

     注意事项: 1.注册.NET 如果先安装.net平台,后安装IIS,那么在IIS中可能就没有出现ASP.NET版本的下拉菜单,就要手动注册: 一般.Net版本都存放在:C:\WINDOWS\Micr ...

  2. 20160115--Hibernate

    package com.hanqi.dao; import static org.junit.Assert.*; import java.util.*; import org.hibernate.se ...

  3. 相见恨晚——MarkDown

    什么是MarkDown MarkDown是一种轻量级的标记语言 MarkDown使你更加关注文章的内容 MarkDown使文章的排版变得简单直接 什么情景下使用MarkDown 在我们熟悉的githu ...

  4. Spark 算子

    0.parallelize 1.map 2.mapValues 3.flatMap 4.mapPartitions 5.mapPartitionsWithIndex 6.filter 7.reduce ...

  5. [剖析Javascript原理]1.原生数据类型

    一.原生数据类型 JS共有5种原生数据类型: Boolean true或者false String 字符串,在单引号或者双引号之间(不存在字符类型) Number 整数或者浮点数 Null 空 und ...

  6. libwebsocket manual

    Name: libwebsocket_cancel_service - Cancel servicing of pending websocket activity Synopsis: void li ...

  7. C语言复杂的函数指针声明

    复习C语言ING,发现复杂的函数指针声明看不懂,百度半天终于略知一二. 讲的比较详细的一篇blog: http://blog.csdn.net/megaboy/article/details/4827 ...

  8. 製程能力介紹(SPC introduction) ─ 製程能力改善及評估

    如何改善製程能力 參考下面常態分配圖,原製程能力不足,其製成品有一定比率超出下限規格,其改善對策有二: 縮小製程變異,也就是改善Cp,提高Cp的值. 移動製程中心,也就是改善Ck,減小Ck的值. 就技 ...

  9. 从零开始学 iOS 开发的15条建议

    事情困难是事实,再困难的事还是要每天努力去做是更大的事实. 因为我是一路自学过来的,并且公认没什么天赋的前提下,进步得不算太慢,所以有很多打算从零开始的朋友会问我,该怎么学iOS开发.跟粉丝群的朋友交 ...

  10. 如果有三个Bool型变量，请写出一程序得知其中有2个以上变量的值是true

    下面这篇文章是从StackOverflow来的.LZ面试的时候遇到了一道面试题:“如果有三个Bool型变量,请写出一程序得知其中有2个以上变量的值是true”,于是LZ做了下面的这样的程序: bool ...