CODEWITHSUNDEEP
css
user3450590
user3450590

Reputation: 341

Rotate is stuck at where my mouse pointer is

I want to make an animation in CSS where in ihover on a element, it should flip 360 degree and show its other side.

I used animation: sparkred linear .5s; and then used @keyframes to animate it at 0% and 100% but the animation got stuck at the point where mouse is hovered. I also tried the transition: transform way (it is commented in the fiddle), but worked almost the same. Here is the complete CSS:

html, body{ height: 100%;}
.box1{width: 25%; float: left; height: 100%; }
.blue{ background-color: #0f09cc;}
.red{ background-color: #cc0000;<!-- transform: rotateX(0deg); transition: transform 1.5s;--> }
.red:hover{ animation: sparkred linear .5s; <!--  transform: rotateX(270deg); -moz-transform: rotateX(270deg); -webkit-transform: rotateX(270deg); --> }
.green{ background-color: #00cc00;}
.purple{ background-color: #cc00cc;}

@keyframes sparkred{
0%{transform: rotateX(0deg)}
100%{transform: rotateX(360deg)}
}

Fiddle is here: http://jsfiddle.net/npb9M/

Upvotes: 0

Views: 246

Answers (1)

user887675
user887675

Reputation: 557

The "getting stuck" issue might have to do with the rotating item itself having the :hover. The element's size changes, so the hover hitbox changes as well.

You can have an inner element that rotates, while having the same hover hitbox.

In this fiddle I've got something working; you might be able to use this as an example.

http://jsfiddle.net/npb9M/1/

Upvotes: 1

Related Questions