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);
}

小提琴：http://jsfiddle.net/jonathansampson/ybjv8d7x/

Answer 2

你的效果需要保存-3d才能工作。

IE中不支持preserve-3d，即使它计划在下一个版本中

顺便说一句，这是一个CSS相关的问题，javascript工作正常