CSS3 - Rotate Clockwise than Counter Clockwise - css

Question

I have an HTML element defined like this:
<div id="myElement" class="rotated">></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';
}
}
I then have my CSS defined like this:
.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;
}
I'm not sure what to add for the from and to values of my keyframes. The fact that my element starts rotated by 90 degrees kind of throws me off. Am I on the correct track or way off?
Thanks!

Answer 1

Your element starts rotated because it has the .rotated class, which tells it to be rotated by 90deg.
I modified your example a little to make it more idiomatic.
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">></div>
<button>Toggle</button>
In the javascript we first get our button and element so we can operate on it later (we use querySelector which is more modern and lets you use CSS selectors). Then we define your event handler, which simply toggles the rotate-clockwise CSS class on and off. Lastly we attach our toggle function as a click event handler to the button.
In CSS we tell my-element to be inline-block as to not stretch over the entire width of the window. Also, every change to transform should use a linear transition of 0.1s. Every time .rotate-clockwise gets added or removed the element rotates.
Hopefully this does what you want and helps you understand the problem better.