html - CSS 效果在 Chrome 中有效，但在 IE 11 中无效

Question

我的网站上有一个自定义 CSS 按钮，它在 Chrome 中旋转得很好，但 Internet Explorer 11 让它在悬停时消失，而不是旋转。

您可以在此处看到按钮(这是蓝色的“立即搜索!”按钮):LINK

当我从索引文件中删除这一行时，Chrome 会产生与 IE 相同的错误效果，所以我觉得这是导致 IE 问题的原因。

<script src="http://taskbasket.net/gallery/themes/matheso/js/modernizr.custom.js"></script>

您能提供解决方案吗？谢谢。

Answer 1

Internet Explorer 目前不支持 preserve-3d，但团队是 working to ship it在即将发布的版本中。也就是说，像您这样的简单示例不一定需要此功能，并且可以以更跨浏览器的方式实现。

我尝试通过独立转换两个伪元素来复制您的效果:

<div id="button1">
    <!-- Preserved your markup -->
    <a href="#" data-text="Search Now!"></a>
</div>

a {
    position: relative;
    perspective: 500px;
}

a, a::before, a::after {
    color: #FFF;
    display: inline-block;
    line-height: 44px;
    box-sizing: border-box;
    width: 155px; height: 44px;
    backface-visibility: hidden;
    text-decoration: none;
    text-align: center;
}

a::before, a::after {
    top: 0; left: 0;
    position: absolute;
    content: attr(data-text);
    transition: transform 1s;
}

a::before {
    background: #0965A0;
    transform-origin: 50% 100%;
}

a::after {
    background: #2195DE;
    transform-origin: 50% 0%;
    transform: translateY(100%) rotateX(-90deg);
}

a:hover::before {
    transform: translateY(-100%) rotateX(90deg);
}

a::before, a:hover::after {
    transform: translateY(0) rotateX(0);
}

fiddle :http://jsfiddle.net/jonathansampson/ybjv8d7x/