internet-explorer - IE 中的 CSS 旋转显示不正确

Question

我正拼命尝试从该页面制作第二个效果: http://tympanus.net/Development/CreativeLinkEffects/在 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 旋转了整个“ block ”，而不是其中的单个元素。

有谁知道是否有办法让它在 IE 中工作？

如果没有 - 是否有办法在 IE 中完全禁用该效果(因为它已损坏)？

Answer 1

如果不进行全面的重新设计，那是无法在 IE 中完成的。

问题是 IE 不支持 preserve-3d。

当您旋转 span 时，它是 90 度，而 :before 元素是另一个 90 度，因此它是完全可见的。

但是，没有 preserve-3d。 :before 元素以 90 度 Angular 投影到 span 上，因此它的大小变为 0。(除此之外，span 也是不可见的)。

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