使用CSS围绕圆周旋转对象? [英] Rotate objects around circle using CSS?
本文介绍了使用CSS围绕圆周旋转对象?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图让三个物体围绕一个圆圈旋转。到目前为止,我已经能够得到一个对象绕着圆周旋转。我不能得到多于一个,而不会弄乱的代码。任何人都可以建议最好的方法来完成这个?这里是代码和小提琴的一部分。非常感谢!
I'm attempting to have three objects rotating around a circle. So far I've been able to get one object to spin around the circle. I am unable to get more than one without messing up the code. Could anyone advise on the best way to accomplish this? Here is part of the code and a Fiddle. Thanks!
以下是 演示< a>
.outCircle {
width: 200px;
height: 200px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: red;
display: block;
}
@-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
@-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">hello
</div>
</div>
</div>
</div>
推荐答案
Jquery解决方案适用于任何数量的外部项目。
Jquery solution which works for any number of outer items.
Jquery无耻地从 ThiefMaster♦ 及其回答 Q& A
Jquery shamelessly stolen from ThiefMaster♦ and their answer at this Q & A
var radius = 100; // adjust to move out items in and out
var fields = $('.item'),
container = $('#container'),
width = container.width(),
height = container.height();
var angle = 0,
step = (2 * Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
if (window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
body {
padding: 2em;
}
#container {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid #000;
position: relative;
border-radius: 50%;
animation: spin 10s linear infinite;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
position: absolute;
background: #f00;
animation: spin 10s linear infinite reverse;
}
@keyframes spin {
100% {
transform: rotate(1turn);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
这篇关于使用CSS围绕圆周旋转对象?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文