旋转动画悬停，但移动鼠标悬停 - >取消

Question

我想在我的网站上的SVG触发旋转动画。它定义的工作，但问题是当我移动我的鼠标时，我悬停元素它取消动画。

所以我有一个对象SVG元素：

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

这是一个漫长的SVG文档，但这里的样式表连接到它：

#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); 
} 

您可以看到的jsfiddle

SVG的结构

最后脚本：

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"); 
    }); 

}; 

我也试过CSS，这是同样的问题。

这里是一个的jsfiddle：

https://jsfiddle.net/7f7wjvvt/

1问题：

我怎么能在元素上移动鼠标时，流体旋转过渡？

第二个问题：

怎样才可以有一个Y轴旋转是留在现场，并没有转化到左侧？尝试在拨弄

第三问题：

为什么的jsfiddle显示SVG以及在Firefox，而不是在铬？ 此外，透视似乎不能在铬...工作？为什么？

任何想法？

Answer 1

不幸的是，我想很多人都遇到的问题，只是对（3D）CSS转换的SVG元素糟糕的浏览器支持的结果。

在普通<div>内将卡片<g>移动到它们自己的<svg>，并且将交互应用于div元素会使事情变得更容易。

.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>

我怎么能在元素上移动鼠标时，流体旋转过渡？

一旦卡旋转，它很容易失去悬停。尽管如此，悬停状态将应用于底层元素。如果您确保这是该卡的父母，你可以使用这个造型CSS规则：

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

怎样才可以有一个Y轴旋转是留在现场，并没有转化到左侧？尝试它在小提琴

你将不得不使用transform-origin，就像你试过。它只是不适合svg元素工作...

transform-origin: center; 

为什么的jsfiddle显示SVG以及在Firefox，而不是在铬？此外，透视似乎并不适用于铬...为什么？

就像我说的，它只是不正确支持...

Answer 2

我没有一个完整的答案，但对于你的第一个问题，我建议用.mouseenter触发更换.hover，而对于第二个刚刚失去了角度。 另外，我试着给你的CSS添加前缀，但无济于事，似乎这里的浏览器之间存在一些兼容性问题。

Answer 3

回复您的键盘盖

它看起来像这个问题第一个问题是，当卡旋转，它们会收缩。然后鼠标移动到该卡，当卡移动再次围绕它重新进入并再次MouseEnter事件触发不再。然后重复整个过程（只要鼠标正在移动）。

解决的办法是防止事件再次射击，直到动画我完成了。

有几种方法来解决这个问题，但这里是一个解决办法：

// 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); 
    } 
}); 

这里是展示这种技术工作只是rectangle1小提琴。

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