css3 animation rotate object

css3 animation rotate object

HTML

<div class="container">
    <div class="row">
        <h2>CSS3 rotate example</h2>
<div id="box"></div>
</div>
    </div>

CSS

div#box {
    background-color: red;
    
    transition:         transform 0.5s ease-in-out;
    width: 100px; border-radius:30%;
    height: 100px;
   
}

.doit { 
            transform: rotate(45deg); 
}

JavaScript

$("div#box").on("mouseover mouseout", function(){
$(this).toggleClass("doit");
})