Internet explorer IE中的CSS旋转未正确显示

我拼命想从这一页中产生第二个效果： 在Internet Explorer中工作。它的问题是，只有顶部标签会旋转-下面的标签保持隐藏状态

以下是本网站的原始CSS部分：

.cl-effect-2 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

.cl-effect-2 a span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background: #2195de;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.csstransforms3d .cl-effect-2 a span::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0965a0;
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

我尝试了很多东西，已经得出结论，问题在于IE旋转整个“块”，而不是其中的单个元素

有人知道有没有办法让它在IE中工作吗

---

如果没有-有没有一种方法可以完全禁用IE中的效果（因为它被破坏了）？

如果没有完全的重新设计，IE中就无法做到这一点

问题是IE不支持preserve-3d

旋转跨度时，跨度为90度，而：before元素为另一个90度，因此它完全可见

但是，如果没有preserve-3d。：在元素以90度的角度投影到跨度上之前，因此其大小为0。（除此之外，跨度也是看不见的）

---

要在IE中工作，您需要为底面创建一个单独的元素。

好的，过了一会儿我就知道了

基本上，我创建了如下菜单元素结构：

<li data-hover="[Element title]">
    <a href="#">[Element title]</a>
</li>

这样，当元素旋转时，A标记将可见，以便用户可以单击它

---

在Firefox、Chrome和IE中都能完美地工作。在Safari中有一些问题-在悬停状态下，第一个面（而不是旋转）消失了。但是，第二个面旋转正确，因此除了奇怪的视觉“小故障”，菜单可用。

您正在测试哪个IE版本？在IE 11上，原始显示只有一个面是的，这正是问题所在。谢谢您的回答。你能帮我一点忙吗？因为我试图不使用：：before伪元素，但失败得很惨。

> li {
    position: relative;
    display: inline-block;
    width: remCalc(160px);
    height: remCalc(40px);
    @include perspective( remCalc(1000px) );
    &::before {
        width: remCalc(160px);
        height: remCalc(40px);
        display: inline-block;
        @include single-transition(transform, 300ms);
        position: absolute;
        top: 0;
        left: 0;
        content: attr(data-hover);
        @include transform-origin(50%, 0);
    }
    a {
        width: remCalc(160px);
        height: remCalc(40px);
        display: inline-block;
        @include single-transition(transform, 300ms);
        position: absolute;
        top: 22px;
        left: 0;
        @include rotateX(-90deg);
        @include transform-origin(0, 20px, 0);
    }
    &:hover::before,
    &:focus::before  {
        @include create-transform(false, false, false, false, 90deg, false, false, false, false, -22px);
    }
    &:hover a,
    &:focus a {
        @include create-transform(false, false, false, false, 0, false, false, false, false, -22px);
    }