CSS三角形点击翻转答案

【问题标题】：CSS Triangle Flip On ClickCSS三角形点击翻转
【发布时间】：2013-02-10 00:24:07
【问题描述】：

好的，我有这个三角形 div，当我点击它时，它只旋转 180 度。好的，到目前为止一切顺利，但如果我再次点击它，它会保持不变这是我的代码。

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

【问题讨论】：

是的，它应该再旋转 180 度
您想将其旋转回初始值吗？

标签： javascript jquery css geometry transform

【解决方案1】：

转换不是这样工作的（即你不能应用它两次）。您必须跟踪状态：

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

【讨论】：

【解决方案2】：

“变换”样式设置元素从其原始位置开始旋转。当您第一次单击它时，它会将元素从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)"});
});`

【讨论】：

如果您有多个具有类 Triangle 的 HTMLElement 是否可以正常工作？

【解决方案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)"});
});

【讨论】：