|
我们在这几集都讨论各种不同样式的旋转。本集，制作一个八幅小图在背景图的圆周上进行自转的动画，这和上两集介绍的旋转不同，小图是围绕着自己的圆心旋转的，故曰“自转”。
多图在同一圆周上，必然要求均匀分布。在圆周上有八个图，自然就要有八个座标点。本集，我主要说的就是如何确定座标。
拿出一张纸，画个圆，并在圆周上标八个点（为了我说得明白，请将这八个点都标上名字，按照时钟位置，依次将12点、3点、6点、9点处分别标为大写的A、B、C、D，再将1、2点、4、5点、7、8点、10、11点之间处分别标为小写的a、b、c、d）。假定圆的直径为400（我推荐这个值，过大过小均不宜），x轴为圆的上端切线，y轴为圆的左侧切线（请注意，我在此处违背常理，把y轴原点以下定为正数，因为 top 的值是越往下越大）。
从这个图以及点的布局看，无须解释，A点的座标是（200,0），B点的座标是（400,200），C点的座标是（200,400），D点的座标是（0,200）。对于a、b、c、d 点的座标确定，我要多说几句了。可不是取中间值啊！例如：如果把 a 点的座标定为（300,100）， b 点的座标定为（300,300）， c 点的座标定为（100,300）, d 点的座标定为（100,100），这四个点就不在圆周上了，与 A、B、C、D 点形成的是矩形轨迹，这当然不是我们所需要的。稍有一点几何知识的人都能很直观的看出，它们的座标应该是 a（350,50），b（350,350），c（50,350），d（50,50）。
座标值确定之后，就可以用到代码当中了，八个小图围成了一个圆。这个圆在页面上十有八九位置不当。而且，它与背景图也不吻合。无论是背景图还是八个小图，都需要重新定位。首先是把背景图定位好，然后再定位八个小图。给八个小图定位意味着要修改它们的座标，分两步：第一步先修改横座标（即 left 的值），八个小图的 left 值要加减同一个数。横向定位好之后，进行第二步，修改纵座标（即 top 的值），当然也是八个小图的 top 值要加减同一个数啦！修改座标，谁先谁后均可。
八幅小图在背景图的圆周上自转效果。
代码：
＜div align="center"＞
＜style type="text/css"＞.背景图片{
position: relative;top: 20px; left: 0px;
margin: 0 auto;
border-radius: 50%;
background-image:url(http://img2.oldkids.cn/upload/2017/10/04/blog_20171004143206529.gif);
width: 460px; height: 460px;
}
.旋转图 img{
position: absolute;
width: 180px; height: 180px;
transform-origin:50% 50%;
animation: 转 6s linear infinite;
}
@keyframes 转{
0%{transform:rotate(0deg);}
100%{transform:rotate(-360deg);}
}
.wheelpicfour {top:-50px; left:150px;}
.wheelpicseven{top:0px; left:300px;}
.wheelpictwo{top:150px; left:350px;}
.wheelpicsix{top:300px; left:300px;}
.wheelpicone{ top:350px; left:150px; }
.wheelpicfive{ top:300px; left:0px; }
.wheelpicthree{ top:150px; left:-50px; }
.wheelpiceight{ top:0px; left:0px;
}
＜/style＞
＜div class="背景图片"＞
＜div class="旋转图"＞＜img class="wheelpicone"
src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" / ＞＜img class="wheelpictwo" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞＜img class="wheelpicthree" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞ ＜img class="wheelpicfour" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞ ＜img class="wheelpicfive" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞ ＜img class="wheelpicsix" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞ ＜img class="wheelpicseven" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞ ＜img class="wheelpiceight" src="http://www.oldkids.cn/upload/2018/09/25/blog_20180925095850770.png" /＞
＜/div＞
＜/div＞
代码解析：
position: relative;top: 20px; left: 0px; 背景图相对定位。
border-radius: 50% 圆角代码，使背景图呈圆形轮廓。
position: absolute; center；旋转图绝对定位，使其保持圆形布局。
transform-origin:50% 50% 规定原点位置，使小图旋转轴心在圆心。
animation:转 6s linear infinite 规定动画类型为旋转；设定完成动画一个周期所需秒数；设定动作无限循环。
wheelpicfour {top:-50px; left:150px; 类似于这样的代码有八个，系小图座标。
设置座标可以使小图组成矩形、菱形、圆形、椭圆形、三角形、六角形以及不规则等多种形状，朋友们可以一试。
|
