css - CSS3 rotate3d bug -
i've got little problem rotate3d. on fiddle: https://jsfiddle.net/c3snpkpr/
the problem is, if hover on <div>
from left or right, works , bugging , rotating more or less given 180deg. <div>
corners same. how can avoid this?
what happens when hover
element, mouse pointer kind of end outside when animates (the element loose mouse capture), , when, moves if have taken pointer outside yourself.
use wrapper element (fiddle demo) or pseudo (below sample)
div { width: 150px; height: 150px; margin-right: 20px; } div:after { content: ''; display: block; background: green; width: 150px; height: 150px; transition: 1s; transform: rotate3d(0, 1, 0, 0deg); border-radius: 50%; border: 5px solid red; } div:hover:after { background: red; transition: 1s; border: 5px solid green; transform: rotate3d(0, 1, 0, 180deg); }
<div></div>
Comments
Post a Comment