我正在使用使用Bootstrap的應用程序。你可以親自看到它here。當用戶點擊鏈接時，我希望它旋轉。代碼非常小。它看起來像這樣：通過CSS旋轉圖像

<div class="form-group"> 
    <ul class="list-inline"> 
    <li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li> 
    <li><h5>category</h5></li> 
    </ul> 
</div>

當用戶點擊「v」我希望它從「v」動畫到「>」。換句話說，當有人點擊它時，我希望人字形逆時針旋轉90度。看過CSS 3中的強大功能之後，看起來有一種方法可以使用純CSS來完成此操作。我是否正確，如果是的話，如何？

2014-09-10 JQuery Mobile

試試這個：

DEMO

<div class="form-group"> 
    <ul class="list-inline"> 
    <li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li> 
    <li><h5>category</h5></li> 
    </ul> 
</div>

SCRIPT：

$('.glyphicon').on('click', function(){ 
    $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-right'); 
    });

來源

2014-09-10 12:08:32

除了設置標誌並執行removeClass和addClass之外，還可以使用單個「toggleClass」同時使用人字形和人字形。只要最初只有一個類被使用，它將總是添加一個，並在使用切換時刪除另一個。 – 2014-09-10 12:12:19

是的好點！ – 2014-09-10 12:14:34

+1。同意斯蒂芬在那裏的觀點。可以簡化像[這裏]（http://www.bootply.com/ZfIyvBoSwE）。如果您願意，請隨時在答案中使用演示。 – Harry 2014-09-10 12:15:20

要使用CSS旋轉的元素，你可以簡單地使用transform: rotate(-90deg)

然而，這不會對點擊旋轉它只是還沒有。你可能需要JavaScript。一個辦法做到這一點（使用jQuery，因爲自舉已經要求它）：

CSS：

.rotated { 
    transform: rotate(-90deg); 
}

JS：

$('.yourElement').click(function() { 
    $(this).toggleClass('rotated'); 
});

的 'toggleClass' 將確保旋轉恢復時你再次點擊它。否則，只需使用'addClass'即可使用一次。

編輯

正如Harry指出，你也可以使用已經存在「圖標，雪佛龍權」以類似的方式：

$('.yourElement').click(function() { 
    $(this).toggleClass('icon-chevron-down icon-chevron-right'); 
});

只要你的HTML開始只有這兩個類中的一個，此代碼將始終刪除一個並添加另一個。

來源

2014-09-10 12:06:48

應該已經有一個名爲glyphicon-chevron-right的類用於旋轉版本，所以也可以使用。目前的答案沒有錯，只是它會減少一些額外的代碼:) – Harry 2014-09-10 12:09:08

我完全忽略了這一點，好點。傑克的回答雖然不太漂亮，但也涵蓋了這一點。 – 2014-09-10 12:11:17

謝謝，我想我可能會更新我的答案與您的解決方案，因爲我認爲這是一個更好的。 – 2014-09-10 12:20:26

的CSS：

.spinEffect{ 
    -webkit-animation: spin 0.5s infinite linear; 
}

的jQuery：

$(function(){ 
    $(".whatIsClicked").click(function(){ 
     $("#yourDiv").addClass("spinEffect"); 
    }); 
});

來源

2014-09-10 12:09:11

你可以使用這樣一個簡單的腳本。

腳本： -

$(document).ready(function(){ 
    $(".btn.btn-link").click(function() { 
     $(this).toggleClass("rotate"); 
    }); 
})

CSS： -

.rotate{ 
    -ms-transform: rotate(180deg); /* IE 9 */ 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
    transform: rotate(180deg); 
}

HTML： -

<div class="form-group"> 
    <ul class="list-inline"> 
     <li><button class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></button></li> 
     <li><h5>category</h5></li> 
    </ul> 
</div>

希望它能爲你工作的奧尼爾！

來源

2014-09-10 12:13:11

通過CSS旋轉圖像

回答

DEMO

相關問題