CODEWITHSUNDEEP
internet-explorercssrotationtransform
NoviQ
NoviQ

Reputation: 43

CSS rotation in IE not displaying properly

I'm desperately trying to make the second effect from this page: http://tympanus.net/Development/CreativeLinkEffects/ work in Internet Explorer. The problem with it is that only the top label rotates - the one below remains hidden.

Here's the original CSS part from this site:

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

I've tried many things and already came to a conclusion that the problem lies with IE rotating the whole "block", not the individual elements inside it.

Does anyone know if there's a way to make it work in IE?

If not - is there a way to disable the effect completely (as it's broken) in IE?

Upvotes: 1

Views: 1273

Answers (2)

NoviQ
NoviQ

Reputation: 43

OK, I figured it out after a while.

Basically, I created the menu element structure like that:

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

And the CSS code looks like this (please note that I'm using SASS + Compass and I skipped attributes unimportant in this case like font & bg color, etc.):

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

That way when the element rotates, the A tag becomes visible so the user can click it.

Works perfectly in Firefox, Chrome and IE. Has some problems in Safari - on hover, the first face instead of rotating, disappears. However the second face rotates properly so except for weird visual "glitch", the menu is usable.

Upvotes: 1

vals
vals

Reputation: 64164

That can not be done in IE without a full redesign.

The problem is that IE doesn't support preserve-3d.

When you have the span rotated, it is at 90 degrees, and the :before element at another 90 degress, so it is fully visible.

However, without preserve-3d. the :before element is projected over the span , at 90 degress, so it becomes of size 0. (and besides that, the span is also invisible).

For that to work in IE, you need to create a separate element for the bottom face.

Upvotes: 1

Related Questions