javascript - 旋转动画悬停但在悬停时移动鼠标 ->取消

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/

第一个问题:

如何在元素上移动鼠标时实现流畅的旋转过渡？

第二个问题:

我怎样才能让 Y 旋转保持在原地而不是向左移动？在 fiddle 中尝试

第三个问题:

为什么 jsfiddle 在 firefox 中能很好地显示 svg 而在 chrome 中却不行？ 此外，透视在 chrome 中似乎不起作用......为什么？

有什么想法吗？

Answer 1

不幸的是，我认为您遇到的许多问题仅仅是由于浏览器对 svg 元素上的 (3D) css 转换支持不佳造成的。

移动卡片 <g>元素自己<svg>普通里面<div> ，并将交互性应用到 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>

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

卡片旋转后，很容易失去悬停。不过，悬停状态将应用于底层元素。如果您确定这是卡片的父级，则可以使用此 css 规则进行样式设置:

.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

你必须使用 transform-origin ，就像你试过的那样。它不适用于 svg元素...

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 ?

就像我说的，它只是没有得到正确的支持......