IE11 问题与变换 rotateY 和背面可见性悬停效果

Question

我在 atm 上处理的代码有问题，在 Chrome 和 FF 中完全正常，但在 IE 中没有。

基本上这是一个简单的悬停效果，游戏在 Y 轴上翻转 180 度，同时悬停在它上面。背面可见性设置为隐藏，但在 IE 中并非如此。任何想法为什么？正在考虑引入一些 jquery 来解决更旧版本的 IE 的问题..

---

HTML：

<div class="flip-container game">
                <div class="flipper">
                <a href="#">
                    <div class="front">
                      <h1>
            Front
            </h1>
                    </div>
                    <div class="back">
                            <span class="game-title">
                                <h3>BACK</h3>
                                <span class="mob-icon"></span>
                            </span>

                            <button class="button green"><a href="#">Play Now</a></button>
                            <button class="blue button"><a href="#">More Info</a></button>
                    </div>

                </a>
                </div>
            </div>

---

CSS：

   /*  do some flipping  */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg) scale(1.05);
        position: relative;
        z-index: 2;
    }


.flip-container, .front, .back {
    width: 185px;
    height: 145px;
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
    background-color: #333;
    color: #000;
    text-align: center;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
    background-color: #010b15;
    border: solid 2px #034baf;
}

FIDDLE - https://jsfiddle.net/Lcdrugvn/3/

Answer 1

找到解决方案 -

/* do some flipping */

.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}

.flip-container:hover .back {
    transform: rotateY(0deg);
    }

.flip-container:hover .front {
      transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
  width: 185px;
  height: 145px;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
  background-color: #333;
  color: #000;
  text-align: center;
}

.back {
    transform: rotateY(-180deg);
  background-color: #010b15;
  border: solid 2px #034baf;
}

Answer 2

/*  do some flipping  */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg) scale(1.05);
        position: relative;
        z-index: 2;
    }

.flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 185px;
    height: 145px;
}

.flipper {
    transition: 0.4s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.4s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
    background-color: #333;
    color: #000;
    text-align: center;
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
    background-color: #010b15;
    border: solid 2px #034baf;
}

试试这个，请调整过渡时间