CSS3 Transform Rotate3D - 悬停时，强制完全转换？

Question

Here's a fiddle .

.box:hover {
    -moz-transform: rotate3d(0,1,0,180deg);
    -webkit-transform: rotate3d(0,1,0,180deg);
    -ms-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
}

我正在使用一些 CSS3 在我网站的某些部分获得卡片翻转效果。我在任何 Windows 浏览器中都没有遇到此问题，但我收到一些 Mac 用户的报告，称旋转卡住并且不会完全翻转。看起来在那些浏览器中，当进行 3d 转换时，悬停的“hitbox”似乎与元素和内容一起转换(当它接近旋转 90 度时，元素的 hitbox 接近 1px 宽度)。

我对正在发生的事情可能是错误的，或者可能有比我想到的更好的解决方法，但我希望通过在鼠标触发时立即播放完整的过渡/动画来解决这个问题徘徊。这样，即使悬停的碰撞框确实改变了大小，元素也会完成翻转。

仅使用 CSS3 是否可行？或者我应该研究 javascript 解决方案吗？

Answer 1

用 wrapper 包裹它，然后将鼠标悬停在 wrapper 上。我在 Mac 上测试了 FF 和 chrome

https://jsfiddle.net/6udv405h/3/

.wrapper:hover .box {
    -moz-transform: rotate3d(0,1,0,180deg);
    -webkit-transform: rotate3d(0,1,0,180deg);
    -ms-transform: rotate3d(0,1,0,180deg);
    transform: rotate3d(0,1,0,180deg);
}

HTML

<div class="wrapper">
    <div class="box"></div>
</div>