如何让4个元素围成一圈旋转？ [英] How can I make 4 elements rotate in a circle?

问题描述

首先，我想说我是jquery的完全初学者。
我想让这些div以顺时针方向绕圆形移动，直径为500px。我怎么能这样做？

First of all I would like to say I am a complete beginner to jquery. I would like to make these divs move round in a circle in a clockwise direction with a 500px diameter. How could i go about doing this?

<div id="move0" class="textBox"></div>
<div id="move1" class="textBox"></div>
<div id="move2" class="textBox"></div>
<div id="move3" class="textBox"></div>

请查看我的网站 http://tragicclothing.co.uk/T-Shirts.html
这就是我希望能够发生的事情

Please look at my website http://tragicclothing.co.uk/T-Shirts.html This is what I want to be able to happen

步骤：

1. 点击中心的按钮


2. 图像出现在此按钮周围（淡入）


3. 围绕此按钮慢慢旋转图像

推荐答案

注意：这不是我的代码，而是由 Lea Verou 在她各自的博客上。

Note: This is not my code, but was written by Lea Verou on her respective blog.

仅限CSS3的圆形动画

这个特别的 JSFiddle 显示围绕某个中心点旋转的一个元素。它的CSS实际上非常简单：

CSS3-only circular animation

This particular JSFiddle shows one element being rotated around some central point. CSS of it is actually really simple:

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

body > div {
    width:100px;
    height:100px;
    margin: 20px auto 0;
    color:orange;
    font-size:100px;
    line-height:1;
    animation: circle 5s linear infinite;
    transform-origin:50% 200px;
}

div > div {
    animation: inner-circle 5s linear infinite;
}

<div><div>☻</div></div>

基本上你所要做的就是把它们转换成CSS类，然后在你的中央按钮上添加一个点击处理程序，它会淡化你周围的图像并为它们添加一个CSS类，这样它们就可以了也开始旋转。

Basically all you'd have to do is convert these to CSS classes and then just add a click handler on your central button that would fade-in your images around it and add a CSS class to them so they would start rotating as well.

这篇关于如何让4个元素围成一圈旋转？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！