CSS3 旋转 太阳系
参考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>
