Rotate the animation, but when you move the mouse when you hover & # 8594; cancel

Question

I am trying to trigger a rotation animation in SVG on my website. This definitely works, but the problem is that when I move the mouse, when I find the item, it cancels the animation.

So, I include the svg element of the object:

<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's a 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 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, this is the same problem.

Here is the jsfiddle:

https://jsfiddle.net/7f7wjvvt/

1st question:

How can I move on to moving fluid while moving the mouse around an element?

Second question:

How do I have a Y turn that stays in place and doesn't move left? Try the violin

Third question:

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

Any ideas?

Answer 1

Unfortunately, I think that many of the problems you are experiencing are simply the result of poor browser support for (3D) CSS transformations on svg elements.

Moving <g> maps to your own <svg> inside a regular <div> , and applying interactivity to the div element will make it 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 move on to moving fluid while moving the mouse around an element?

As soon as the card rotates, it easily loses freezing. However, the freeze state will be applied to the base element. If you make sure that this is the parent of the map, you can use this css rule to style:

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

How do I have a Y turn that stays in place and doesn't move left? Try the violin

You will need to use transform-origin as you tried. It just doesn't work for svg elements ...

 transform-origin: center; 

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

As I said, it is simply not supported properly ...

Answer 2

Repeat your first flip issue

It seems that the problem is that when the cards rotate, they are compressed. Then the mouse is no longer above the map, and when the map moves again, it reappears and the mouseenter event fires again. Then the whole process is repeated (while the mouse is moving).

The solution is to prevent the event from re-triggering until the animation finishes.

There are several ways to fix this, but here is one solution:

 // Flag to keep track of whether rectangle1 is flipping var flipping1 = false; $("#rectangle1").mouseenter(function() { // Only toggle the animation if we aren't already doing so if (!flipping1) { // Add the class to start the flip $(this).toggleClass("flip"); // Set flag to mark that we are flipping flipping1 = true; // Then in just over a second, turn the flag off again setTimeout(function () { flipping1 = false; }, 1010); } }); 

Here's a fiddle showing this technique working only with rectangle1.

https://jsfiddle.net/7f7wjvvt/4/

Answer 3

I do not have a complete answer, but for your first question, I would suggest replacing .hover with a .mouseenter trigger, and for the second, just lose perspective. Also, I tried your css prefix, but to no avail, it seems that there are some compatibility issues between browsers here.