CSS3动画旋转方向 - 选择框

Question

我想我的自定义选择框给旋转方向，即应该在完成一转或完整的周期。如果打开，它应顺时针方向顺时针旋转。

这是我曾尝试： http://codepen.io/iahmad/pen/qNvaQr

方向永远是这样
http://image.flaticon.com/icons/png/128/120/120869.png

Answer 1

通过简单的交替给你的jQuery脚本，您可以通过以下逻辑达到你想要的效果：

• img的默认状态为0轮转
• On cl ick，应用增加180度旋转的类open。
• 当再次点击，另一类添加.turn从而完成旋转周期到360度。
• 当turn结束过渡（1秒后），除去所有的类，以旋转恢复到0，但是从360到0的过渡将是有问题的，因此要避免这一点，我们暂时禁用过渡，并在下次重新恢复它单击。

演示：

$(function(){ 
 
    $('a').on('click', function(){ 
 
    var el = $(this); 
 
    if (!el.hasClass('open')) { 
 
     el.children('img').attr('style',''); 
 
     el.addClass('open'); 
 
    } else { 
 
     el.removeClass('open').addClass('turn'); 
 
     setTimeout(function(){ 
 
     \t el.children('img').attr('style','transition: none'); 
 
     el.removeClass('turn'); 
 
     }, 1000); 
 
    } 
 
    }); 
 
});

a img { transition: all 1s ease; } 
 
a.open img { transform: rotate(180deg); } 
 
a.turn img { transform: rotate(360deg); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#"><img src="http://image.flaticon.com/icons/png/128/118/118738.png"></a>

的jsfiddle：https://jsfiddle.net/azizn/zcnatgxq/