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

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -