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

Question

I'm trying to trigger a rotate animation in an SVG on my website. It definetly work but the problem is when i'm moving my mouse when i'm on hover the element it cancels the animation.

So i include an object svg element:

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

which is a long SVG document but here is stylesheet attached to 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 the svg structure in the jsfiddle

And finally the script:

window.onload=function() {
    var svgDoc = $("#branching")[0].contentDocument; // Get the document object for the 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 also tried with CSS, it's the same problem.

Here is a jsfiddle:

https://jsfiddle.net/7f7wjvvt/

1st question:

How can i have a fluid rotate transition when moving the mouse on the element ?

2nd question:

How can i have a Y rotation that stay on the spot and not translate to the left ? Try it in the fiddle

3rd question:

Why the jsfiddle display the svg well in firefox and not in chrome? Also, perspective doesn't seem to work in chrome ... WHY ?

Any ideas ?

Answer 1

Unfortunately, I think many of the problems you're experiencing are simply the result of bad browser support for (3D) css transforms on svg elements.

Moving the cards <g> elements to their own <svg> inside an ordinary <div>, and applying the interactivity to the div element would make stuff a 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 i have a fluid rotate transition when moving the mouse on the element ?

Once the card rotates, it easily looses hover. The hover state will be applied to underlying element though. If you make sure this is the card's parent, you can use this css rule for styling:

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

How can i have a Y rotation that stay on the spot and not translate to the left ? Try it in the fiddle

You'll have to use transform-origin, like you tried. It just doesn't work for svg elements...

transform-origin: center;

Why the jsfiddle display the svg well in firefox and not in chrome? Also, perspective doesn't seem to work in chrome ... WHY ?

Like I said, it just isn't supported properly...