如何在单击时旋转图像，然后在再次单击后将其旋转回来？使用HTML、CSS和jQuery

我试图使一个网站，有一个图像（播放按钮）。按下该按钮时，会出现iframe，图像应缓慢旋转90度。当再次单击图像时，iframe应该消失，图像应该旋转回原来的90度，但到目前为止，我无法让它工作

我猜我的jQuery有问题，但还没有找到问题所在

下面是一个例子：

HTML:

jQuery：

$( document ).ready(function() {
    var NumberOfClicks = 0;
        $('#TrailerBox img.PlayButton').click(function(e) {
            e.preventDefault();
            $('#video').toggleClass('hidden');

            NumberOfClicks++;
            if (NumberOfClicks = 1) {
                        $(this).css({
                            '-webkit-transform': 'rotate(' + 90 + 'deg)',
                            '-moz-transform': 'rotate(' + 90 + 'deg)',
                            '-ms-transform': 'rotate(' + 90 + 'deg)',
                            'transform': 'rotate(' + 90 + 'deg)'
                        });
                        $(this).rotate(rotation);
                };
            }
            if (NumberOfClicks = 2) {
                        $(this).css({
                            '-webkit-transform': 'rotate(' + -90 + 'deg)',
                            '-moz-transform': 'rotate(' + -90 + 'deg)',
                            '-ms-transform': 'rotate(' + -90 + 'deg)',
                            'transform': 'rotate(' + -90 + 'deg)'
                        });
                        $(this).rotate(rotation);
                };
                NumberOfClicks = 0;                    
            }
   });

---

使用此代码，如果这是您想要的：

$(document).ready(function(){
    $rotated = false;
    $('#TrailerBox img#PlayButton').click(function(){
        if($rotated == false){
            $(this).css({
                '-webkit-transform': 'rotate(' + 90 + 'deg)',
                '-moz-transform': 'rotate(' + 90 + 'deg)',
                '-ms-transform': 'rotate(' + 90 + 'deg)',
                'transform': 'rotate(' + 90 + 'deg)'
             });
             $rotated = true;
        }else{
            $(this).css({
                '-webkit-transform': 'rotate(' + 0 + 'deg)',
                '-moz-transform': 'rotate(' + 0 + 'deg)',
                '-ms-transform': 'rotate(' + 0 + 'deg)',
                'transform': 'rotate(' + 0 + 'deg)'
             });
             $rotated = false;
        }
    });
});

---

因此，一个让你的生活少一点压力的好办法是建立一个css类，该类具有这些设置，并在过渡过程中使用Easy。这创造了我认为您需要的动画效果，并且更易于跟踪，因此下面选择器的css将是：

    #PlayButton {
        width: 5em;
        height: 10em;
        cursor: pointer;
        background-color:red;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.4s ease-in;
        -moz-transition: all 0.4s ease-in;
        -o-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
    }

.rotateOn{-webkit-transform: rotate(90deg)!important;
                     -moz-transform: rotate(90deg)!important;
                     -ms-transform: rotate(90deg)!important;
                     transform: rotate(90deg)!important;
                    -webkit-transition: all 0.4s ease-in;
                    -moz-transition: all 0.4s ease-in;
                    -o-transition: all 0.4s ease-in;
                    transition: all 0.4s ease-in;
       }

jquery可以是：

`$(document).ready(function(){
    $rotated = false;
    $('#TrailerBox img#PlayButton').click(function(){
       $(this).toggleClass('rotateOn');
    });
});`

---

这没有按照OP的要求设置动画。尝试了代码，也解决了问题，两个代码似乎都有相同的动画效果，非常感谢！刚刚尝试了代码，它的工作！！非常感谢您如果有帮助，请将此标记为正确答案！

    #PlayButton {
        width: 5em;
        height: 10em;
        cursor: pointer;
        background-color:red;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.4s ease-in;
        -moz-transition: all 0.4s ease-in;
        -o-transition: all 0.4s ease-in;
        transition: all 0.4s ease-in;
    }

.rotateOn{-webkit-transform: rotate(90deg)!important;
                     -moz-transform: rotate(90deg)!important;
                     -ms-transform: rotate(90deg)!important;
                     transform: rotate(90deg)!important;
                    -webkit-transition: all 0.4s ease-in;
                    -moz-transition: all 0.4s ease-in;
                    -o-transition: all 0.4s ease-in;
                    transition: all 0.4s ease-in;
       }

`$(document).ready(function(){
    $rotated = false;
    $('#TrailerBox img#PlayButton').click(function(){
       $(this).toggleClass('rotateOn');
    });
});`