CSS3 变换 Rotate3D - 悬停时强制完全变换？

Question

.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 宽度） .

我对正在发生的事情可能是错误的，或者可能有比我想象的更好的解决方法，但我希望通过让完整的 transition/animation 尽快播放来解决这个问题鼠标触发悬停。这样，即使悬停的 hitbox 确实改变了大小，元素也会完成翻转。

只用 CSS3 就可以吗？还是我应该研究 javascript 解决方案？

Answer 1

<script type="text/javascript">
    $(document).ready(function () {
        $('.box').mouseover(function () {
            var box = $(this)
            $(box).addClass('hovered');

            setTimeout(function () {
                $(box).removeClass('hovered');
            }, 1000);
        });
    });
</script>

Jquery 的一点点解决了我的问题。我仍然更愿意只使用 CSS，所以如果您有更好的解决方案而不使用 JS，请与我联系。

Answer 2

用包装纸包裹它，然后将鼠标悬停在包装纸上。我在 FF 上测试，在 Mac

上测试 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>

CSS3 变换 Rotate3D - 悬停时强制完全变换？

CSS3 Transform Rotate3D - On Hover, Force FULL Transform?

css

css-transitions

css-transforms