CSS3 - 順時針旋轉比逆時針

我有一個這樣定義的HTML元素：CSS3 - 順時針旋轉比逆時針

<div id="myElement" class="rotated">&gt;</div> 
<button onClick="toggle('myElement');">Toggle</button> 

function toggle(eid) { 
    var el = document.getElementById(eid); 
    if (el) { 
    el.className += el.className ? 'rotate-clockwise' : 'rotate-counter-clockwise'; 
    } 
}

然後我已經定義是這樣我的CSS：

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

@keyframes rotateClockwise { from { ? } to { ? } } 
.rotate-clockwise { 
    animation rotateClockwise 0.1s linear; 
} 

@keyframes rotateCounterClockwise { from { ? } to { ? } } 
.rotate-counter-clockwise { 
    animation rotateCounterClockwise 0.1s linear; 
}

我不知道該怎麼加我的keyframes的值爲from和to。我的元素開始旋轉90度的事實讓我感到不快。我在正確的軌道上還是離開？

謝謝！

來源

2015-12-10 Chad Campbell

當你說順時針旋轉並逆時針旋轉時，它是從其基準位置還是從其當前位置旋轉。也就是說，讓我們假設你希望元素在任一方向上都被xdeg旋轉。當我第一次點擊按鈕時，它會說90 + x度，當我再次點擊時，它應該達到90度或90度角？ – Harry

你的元素開始旋轉，因爲它有.rotated類，它告訴它被旋轉了90deg。

我修改了一下你的例子，使它更具慣用性。

var button = document.querySelector('button') 
 
var el = document.querySelector('#myElement') 
 

 
function toggle(event) { 
 
    el.classList.toggle('rotate-clockwise') 
 
} 
 

 
button.addEventListener('click', toggle, false)

.my-element { 
 
    display: inline-block; 
 
    transition: transform 0.1s linear; 
 
} 
 

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

<div id="myElement" class="my-element">&gt;</div> 
 
<button>Toggle</button>

在JavaScript中，我們首先得到我們的按鈕和元素，所以我們可以在其上運行以後（我們使用querySelector這是更現代，使您可以使用CSS選擇器）。然後，我們定義您的事件處理程序，它簡單地打開和關閉切換rotate-clockwise CSS類。最後，我們將我們的toggle函數作爲單擊事件處理程序附加到按鈕。

在CSS中，我們告訴my-element爲inline-block，因爲它沒有拉伸窗口的整個寬度。此外，對transform的每個更改都應使用0.1s的線性轉換。每次.rotate-clockwise被添加或刪除的元素旋轉。

希望這可以做到你想要的，並幫助你更好地理解問題。

來源

2015-12-10 21:24:31 klaemo

CSS3 - 順時針旋轉比逆時針

回答

相關問題