Necesito optimizar mi código javascript para una animación. Ahora se realiza la acción desatando dos funciones con "onmouseenter" y onmouseleave" y me gustaría optiomizar a una sola. Actualmente el código es:
html
<div>
<img onmouseenter=" myf1()"; onmouseleave="myf2()" id="img" class="img
img3" src="http://www.placehold.it/150x150">
</div>
css
.img {
transform: rotate(0); border-radius: 50%;
}
.img2 {margin-left:3.5em; transition: all 1s; transform:rotate(-45deg)}
.img3 {margin-left:0; transition: all 1s; transform:rotate(0)}
js
function myf1() {
var element = document.getElementById("img");
element.classList.remove("img3");
element.classList.add("img2");
}
function myf2() {
var element = document.getElementById("img");
element.classList.remove("img2");
element.classList.add("img3");
}