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旋转整个“块”，而不是其中的单个元素。

有没有人知道是否有办法让它在IE中运行？

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

Answer 1

如果没有完全重新设计，无法在IE中完成。

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

当您旋转跨度时，它是90度，而前面的元素是另一个90度，所以它完全可见。

然而，没有保存-3d。：在元素投射到跨度之前，在90度，因此它变为大小为0.（除此之外，跨度也是不可见的。）

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

Answer 2

好的，过了一会儿我才发现它。

基本上，我创建了这样的菜单元素结构：

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

CSS代码看起来像这个（请注意我使用的是SASS + Compass，我在这种情况下跳过了不重要的属性，如font＆amp; bg color等）。：

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

这样，当元素旋转时，A标记变得可见，因此用户可以单击它。

在Firefox，Chrome和IE中完美运行。在Safari中有一些问题 - 在悬停时，第一张脸而不是旋转，消失。然而，第二面正确旋转，除了奇怪的视觉“毛刺”，菜单是可用的。

IE中的CSS旋转无法正常显示

2 个答案: