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,但球队正在努力出货在即将推出的版本.话虽如此,像您这样的简单示例不一定需要此功能,并且可以以更跨浏览的方式实现.

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

<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/