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轮换到现场而不是向左转？在小提琴中试试

第3个问题：

为什么jsfiddle在firefox中显示svg而不是在chrome中？ 此外，透视似乎不适用于Chrome ...为什么？

有什么想法吗？

Answer 1

不幸的是，我认为您遇到的许多问题只是浏览器支持svg元素上（3D）css转换的错误结果。

将卡片<g>元素移动到普通<svg>内的<div>元素中，将交互性应用于div元素会让事情变得更容易。

＆＃13;

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

＆＃13;

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

＆＃13;

在元素上移动鼠标时，如何进行流体旋转过渡？

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

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

我怎样才能让Y轮换到现场而不是向左转？试试小提琴

您必须使用transform-origin，就像您尝试过的那样。它对svg元素不起作用......

transform-origin: center;

为什么jsfiddle在firefox中显示svg而不是在chrome中？此外，透视似乎不适用于Chrome ...为什么？

就像我说的那样，它还没有得到正确的支持......

Answer 2

通过翻转重新解决您的第一个问题

看起来问题是当卡片旋转时，它们会缩小。然后鼠标不再在卡上，当卡再次移动时，它会重新进入并且鼠标中心事件再次触发。然后整个过程重复（只要鼠标移动）。

解决方案是在动画完成之前防止事件再次触发。

有几种方法可以解决这个问题，但这里有一个解决方案：

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

Answer 3

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

旋转动画悬停但在悬停时移动鼠标 - ＆gt;取消

3 个答案: