旋轉動畫懸停，但移動鼠標懸停 - >取消

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/