Question

我有一个独特的功能，对于一个客户点击一个div另一个div翻转它的地方，把它想象成一张卡片，就像有些人有这些组合图像鳍状肢一样。区别在于它翻转内容与图像内容的div。

如何使用保留-3d动画来添加IE支持？

在此处查看实时示例：

代码：

＆＃13;

$(".cc").click(function(){$(this).toggleClass("active")});

＆＃13;

.cc {
    position: relative;
    width: 90%;
    height: 325px;
    z-index: 1;
    margin: 0 auto;
    -ms-perspective: 1000;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.c {
    width: 100%;
    height: 100%;
    -ms-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.cc.active .c {
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
    box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
}

.face.front {
    color: #fff;
    background-color: #800605;
}

.face.front h2 {
    text-align: center;
    font-size: 2em;
    padding: 30px 20px;
}

.face.back {
    display: block;
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    background-color: #057F80;
}

.face.back p {
    text-align: center;
    font-size: .75em;
    padding: 30px 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cc">
<div class="c">
<div class="front face">
<h2> Fact 1 </h2>
</div>
<div class="back face">
<p> “Drinking cold water can help lower your temperature back to normal while in high heat or strong sun, when you’re at risk of heat exhaustion, heat stroke, and/or death. In addition, cold water is absorbed more quickly into your body than warm water, expediting rehydration according to Columbia University” (McAllister, 2013). </p></div>
</div>
</div>

＆＃13;

编辑：我在下面的回答中修复了对IE10 +的支持。然而，我为IE9做了这个摆弄，这个血腥的东西只不过是一个死亡的装置。如果其他人可以为IE9修复这个问题，那么这个问题可以通过我发布的答案来解决。谢谢。

Answer 1

当你说你添加＆＃34;支持＆＃34;时，我不知道你的意思。为了它。 Internet Explorer只是不支持这种类型的动画。

Answer 2

经过大量的重写和测试后，我终于找到了一个解决方案，尽管它远不及原始代码。

实例： Click here

小提琴：Click Here

代码：

        function() {
            function n(n) {
                n.addEventListener("click", function() {
                    var n = this.classList;
                    n.contains("flipped") === !0 ? n.remove("flipped") : n.add("flipped")
                })
            }
            for (var o = document.querySelectorAll(".c.click"), e = 0, i = o.length; i > e; e++) {
                var l = o[e];
                n(l)
            }
        }();

.c {
    position: relative;
    margin: 0 auto;
    width: 90%;
    height: 200px;
    color: #fff;
}

.cb,.cf {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
    box-shadow: 0 0 7px 0 rgba(0,0,0,.5);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.cf {
    background-color: #800605;
}

.cb {
    background-color: #000;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.cf h2 {
    font-size: 2em;
    padding: 100px 20px;
}

.cb p {
    font-size: .75em;
    padding: 100px 20px;
    text-align: center;
}

.c.click.flipped .cf {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.c.click.flipped .cb {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c click">
   <div class="cf">
       <h2> Fact 1 </h2>
   </div>
   <div class="cb">
          <p> Internet Explorer needs to just die off already. </p>
   </div>
</div>

IE9 +和翻转卡问题

2 个答案: