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转换时，看起来悬停的“命中框”与元素和内容一起被转换（当它接近旋转90度时，元素的命中框接近1px宽度）。 / p>

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

这只能用CSS3吗？或者我应该研究一下javascript解决方案？

Answer 1

用包装纸包好并将悬停物放在包装纸上。我在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>

Answer 2

<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，请联系我。

CSS3 Transform Rotate3D - On Hover，强制完全变换？

2 个答案: