使用jquery&；旋转图像并以特定角度停止；css变换

我正在寻找图像的旋转动画。我使用css变换实现了旋转

但是我想在指向另一个元素的特定角度停止动画。下面是我需要做的一个例子

我想旋转箭头图像并停止指向预定义框。请帮帮我这是html

<div class="drop">
    <div>
        <img src="http://www.belugerinstudios.com/image/picturethumbnail/FunnyCatFootballIcon.JPG"/>
    </div>
</div>

再见

---

享受：）

类似的东西：

HTML:

<div id="wrapper">
    <div id="pointer"></div>
    <div id="box1" class="box" onclick="rotate(-140, 'box1')"></div>
    <div id="box2" class="box" onclick="rotate(-125, 'box2')"></div>
    <div id="box3" class="box" onclick="rotate(-90, 'box3')"></div>
    <div id="box4" class="box" onclick="rotate(220, 'box4')"></div>
    <div id="box5" class="box" onclick="rotate(180, 'box5')"></div>
</div>

<span onclick="rotate(-140, 'box1')">Box1</span>
<span onclick="rotate(-125, 'box2')">Box2</span>
<span onclick="rotate(-90, 'box3')">Box3</span>
<span onclick="rotate(220, 'box4')">Box4</span>
<span onclick="rotate(180, 'box5')">Box5</span>
<span onclick="rotate()">Random</span>

<script>
function rotate(deg, box) {
        if (!deg) {
            deg = Math.floor(Math.random() * 360) + 0;
        }
    $('#pointer').css('transform', 'rotate(' + deg + 'deg)');

    $('.box').removeClass('active');
    box && $('#' + box).addClass('active');
} 
</script>

只需编辑它，就可以将它应该旋转的角度传递给函数

---

编辑2：以五个方框为例，单击方框或方框下方的文本

感谢各位给予正确提示。我终于得到了答案

绘图问题：

旋转：

---

Stephan Wagner的回答

您应该提供您的相关问题代码。您的问题是获得正确的角度（而不是如何使其指向不同的方向）？这接近于我所寻找的。但这些盒子将是动态的。所以我不知道每个盒子的角度。如何在正方形中等距绘制它们，并确定它们与箭头的角度。你的答案+=我的完整答案。谢谢

<div id="wrapper">
    <div id="pointer"></div>
    <div id="box1" class="box" onclick="rotate(-140, 'box1')"></div>
    <div id="box2" class="box" onclick="rotate(-125, 'box2')"></div>
    <div id="box3" class="box" onclick="rotate(-90, 'box3')"></div>
    <div id="box4" class="box" onclick="rotate(220, 'box4')"></div>
    <div id="box5" class="box" onclick="rotate(180, 'box5')"></div>
</div>

<span onclick="rotate(-140, 'box1')">Box1</span>
<span onclick="rotate(-125, 'box2')">Box2</span>
<span onclick="rotate(-90, 'box3')">Box3</span>
<span onclick="rotate(220, 'box4')">Box4</span>
<span onclick="rotate(180, 'box5')">Box5</span>
<span onclick="rotate()">Random</span>

<script>
function rotate(deg, box) {
        if (!deg) {
            deg = Math.floor(Math.random() * 360) + 0;
        }
    $('#pointer').css('transform', 'rotate(' + deg + 'deg)');

    $('.box').removeClass('active');
    box && $('#' + box).addClass('active');
} 
</script>

#wrapper {
    width: 300px;
    height: 300px;
    position: relative;
}

.box {
    border: 2px solid #000;
    width: 50px;
    height: 50px;
    position: absolute;
    cursor: pointer;
}

.box.active {
    background: red;
}

#box1 { top: 0; left: 0; }
#box2 { top: 0; left: 60px; }
#box3 { top: 0; left: 120px; }
#box4 { top: 60px; left: 0; }
#box5 { top: 120px; left: 0; }

#pointer {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    background: no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZtJREFUeNrsmc9HBGEYx2eb1SkiolP0J2S7lA5Z6hLdIqK/oFNdEyWK1Kl/pNSlJR1Sp/QnxBKxpK4xpu/wHNZa9tHMO/PO+3wfPvYy5vXxfPf9NY00TSNLNRYZKwpTmMIUpjCFKUxhClOYwhRWVVPzUBzHLsaeBCdgH/wW8cIkSbzv8C54BnOWIt0Cb2DD0n84i/c1uADjliatPfAIZi3N0osS8XVLy9IUuAWn2SJR5IsbmltLLEstB1ITEt9R9QS2wEcRy5JWuOq73B7YBp26r8Pamgb34ChvxOvS4f56kG5/htzh/mrLLN62dHiYkYgfWoj0YHUk4r1QIz1YqxLxZUvn4Vi7Bw9BOJu15+U3eOFjsDZsicp14+FhqXZeoQir99YhRPoMrPxXtk4d/gI74C7vi7TCCxUeD18kwt0yz8MuupbdY32PeOYcHETKa1zNTqsZeoTrIFxohH2fpS9lFu66GsCXDv9IhG9cD+SD8CvYBO9lDFZ1pK/AUlmy6mUppOIHcQpTmMIUpjCFKUxhClOYwhQeVn8CDABMaF8WQYXUNAAAAABJRU5ErkJggg==);
    -webkit-transition: .6s;
    transition: .6s;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}