javascript - CSS Triangle Flip On Click

Question

さて、私はこの三角形のdivを持っていて、それをクリックすると、180度しか回転しません。これまでのところ順調ですが、もう一度クリックしても同じままです。これが私のコードです。

$('.Triangle').click(function()
{
    var Location = $('.Triangle').offset().left;
    $('#Account').css({"left" : Location});
    $('#Account').slideToggle('fast');
    $('.Triangle').css({"transform" : "rotate(180deg)"});
});

Answer 1

変換はそのようには機能しません（つまり、2回適用することはできません）。状態を追跡する必要があります。

$(".Triangle").on('click', function () {
    if ($(this).data('flipped') {
         $(this).data('flipped', false).css('transform', 'rotate(0deg)');
    }

Answer 2

'transform'スタイルは、要素の元の位置からの回転を設定します。初めてクリックすると、要素がから0degに回転し180degます。180degもう一度クリックすると、回転がからに変わります180deg。

クリック数のカウンターを保持し、それに回転率を掛ける必要があります。このような何かがトリックを行う必要があります：

var count = 1;
$('.Triangle').click(function() {
    var Location = $('.Triangle').offset().left;
    $('#Account').css({"left" : Location});
    $('#Account').slideToggle('fast');
    $('.Triangle').css({"transform" : "rotate(" + (180 * count++) + "deg)"});
});`

Answer 3

var i = 0;
$('.Triangle').click(function() {
    i++;
    var Location = $('.Triangle').offset().left;
    $('#Account').css({"left" : Location});
    $('#Account').slideToggle('fast');
    $('.Triangle').css({"transform" : "rotate(" + (i % 2 ? 0 : 180 + "deg)"});
});