javascript - Rotate animation hover but while moving mouse on hover -> cancel -

i'm trying trigger rotate animation in svg on website. definetly work problem when i'm moving mouse when i'm on hover element cancels animation.

so include object svg element:

<object type="image/svg+xml" data="branching4.svg" id="branching">     browser not support svg </object>  

which long svg document here stylesheet attached it:

#rectangle1, #rectangle2, #rectangle3{     perspective: 1500px; } #rectangle1.flip .card, #rectangle2.flip .card, #rectangle3.flip .card {     transform: rotatex(180deg); } #rectangle1 .card, #rectangle2 .card, #rectangle3 .card{     transform-style:preserve-3d;     transition:1s; } #rectangle1 .face, #rectangle2 .face, #rectangle3 .face{     backface-visibility: hidden; } #rectangle1 #front1{     transform: rotatex(0deg); } #rectangle1 #back1{     transform: rotatex( 180deg ); } #rectangle2 #front2{     transform: rotatex(0deg); } #rectangle2 #back2{     transform: rotatex( 180deg ); } #rectangle3 #front3{     transform: rotatex(0deg); } #rectangle3 #back3{     transform: rotatex( 180deg ); } #rectangle1.flipped, #rectangle2.flipped, #rectangle3.flipped {     transform: rotatex( 180deg ); } 

you can see svg structure in jsfiddle

and script:

window.onload=function() {     var svgdoc = $("#branching")[0].contentdocument; // document object svg     $(".st4", svgdoc).css("font-family", "robotolight,helvetica neue,helvetica,arial,sans-serif");     $("#rectangle1", svgdoc).hover(function(){         $(this, svgdoc).toggleclass("flip");     });     $("#rectangle2", svgdoc).hover(function(){         $(this, svgdoc).toggleclass("flip");     });     $("#rectangle3", svgdoc).hover(function(){         $(this, svgdoc).toggleclass("flip");     });  }; 

i tried css, it's same problem.

here jsfiddle:

https://jsfiddle.net/7f7wjvvt/

1st question:

how can have fluid rotate transition when moving mouse on element ?

2nd question:

how can have y rotation stay on spot , not translate left ? try in fiddle

3rd question:

why jsfiddle display svg in firefox , not in chrome? also, perspective doesn't seem work in chrome ... why ?

any ideas ?

unfortunately, think many of problems you're experiencing result of bad browser support (3d) css transforms on svg elements.

moving cards <g> elements own <svg> inside ordinary <div>, , applying interactivity div element make stuff lot easier.

.card {    display: inline-block;    transform-origin: center;    perspective: 1000px;    background: grey;  }  .card-inner {    width: 100px;    height: 200px;    transition: transform .4s;  }  .card-inner:hover,  .card:hover > .card-inner {    transform: rotatey(180deg);  }

<div class="card">    <div class="card-inner" style="background: yellow">      add svg card here    </div>  </div>    <div class="card">    <div class="card-inner" style="background: blue">      add svg card here    </div>  </div>    <div class="card">    <div class="card-inner" style="background: green">      add svg card here    </div>  </div>

how can have fluid rotate transition when moving mouse on element ?

once card rotates, looses hover. hover state will applied underlying element though. if make sure card's parent, can use css rule styling:

.card-inner:hover, .card:hover > .card-inner {   transform: rotatey(180deg); } 

how can have y rotation stay on spot , not translate left ? try in fiddle

you'll have use transform-origin, tried. doesn't work svg elements...

transform-origin: center; 

why jsfiddle display svg in firefox , not in chrome? also, perspective doesn't seem work in chrome ... why ?

like said, isn't supported properly...