Question

我在导航列表中有一个箭头图像。我想要一个代码，当它点击它时，它会顺时针向下旋转90度，如果它再次被点击，它会旋转回原来的位置。我知道这很容易，但我忘记了CSS3 / Script关系。

感谢您的帮助。

Answer 1

这会将图像旋转90度，直到它变成圆圈

＆＃13;

var angle = 0, img = document.getElementById('image');
document.getElementById('button').onclick = function() {
    angle = (angle+90)%360;
    img.className = "rotate"+angle;
}

＆＃13;

#image {
    transform-origin: top left; /* IE 10+, Firefox, etc. */
    -webkit-transform-origin: top left; /* Chrome */
    -ms-transform-origin: top left; /* IE 9 */
}
#image.rotate90 {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
}
#image.rotate180 {
    transform: rotate(180deg) translate(-100%,-100%);
    -webkit-transform: rotate(180deg) translate(-100%,-100%);
    -ms-transform: rotate(180deg) translateX(-100%,-100%);
}
#image.rotate270 {
    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg) translateX(-100%);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button">Click me!</button>
<img src="http://www.rachelgallen.com/images/autumntrees.jpg" width="300" height="auto" id="image" />

＆＃13;

Answer 2

我可以使用JS来改变CSS或HTML中的代码（使用<style>）。我相信。

如果你知道如何使用CSS旋转图像，你应该很好。

因此，当用户单击箭头时，您将更改图像的CSS

切换旋转图像

2 个答案: