css - 使用 CSS 3 变换 - 鼠标悬停在 Chrome 中无法正常工作

Question

在演示中， 虚拟文本是浮动的，3d 效果使用了变换

-webkit-transform: perspective(300px) rotateX(15deg);

并在悬停时暂停虚拟文本以浮动。

#flyDiv
    {
     width:720px; 
     height:420px;
     transform-origin: 50% 100%; 
     transform: perspective(300px) rotateX(15deg); 
     -webkit-transition: -webkit-transform 10s; 
     -webkit-transform-origin: 50% 100%; 
     -webkit-transform: perspective(300px) rotateX(15deg);
}

它对firefox来说很好，但在chrome中有时会出现一些问题，它不会在悬停时暂停。

JS小提琴