css3 animation rotate object

css3 animation rotate object

by Tsuneo Yoshioka

HTML

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

CSS

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

.doit { 
            transform: rotateY(1800deg);
}

JavaScript

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