CSS3 - 3D翻转动画 - IE10 transform-origin：preserve-3d解决方法

Question

浏览IE10的developer blog后，我发现它们不支持preserve-3d设置。

他们确实提供了一种解决方法，但我似乎无法让它发挥作用。我的示例适用于Safari，Chrome和Firefox，但不适用于IE10。如果有人能帮我实现这一目标，我将非常感激。

单击时，框应围绕Y轴旋转，以显示一些文本和绿色背景颜色。在IE10中不是这种情况

我的例子： http://codepen.io/2ne/pen/zEpge

部分代码：

HTML

<div class="flip-wrapper">
    <div class="front"></div>
    <div class="back">IE10 SUCKS</div>
</div>

CSS

.flip-wrapper {
    cursor: pointer;
    height: 100%;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}

.flip-wrapper .front,
.flip-wrapper .back {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
}

.flip-wrapper .back {
  background: none repeat scroll 0 0 #298F68;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-wrapper.flipped {
  cursor: default;
  -webkit-animation: flip 500ms 1;
    -moz-animation: flip 500ms 1;
    animation: flip 500ms 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

2NE

Answer 1

我似乎无法在任何地方找到一个很好的例子，所以我花了很多时间用一些来制作我自己的。

这个适用于所有浏览器，没有那么奇怪的360deg IE翻转，并且包含静态内容（位于卡的两侧 - 我需要在其右上角放置'翻转'按钮。双方）。

- 我测试了最新版本的Chrome，Firefox，Safari，Opera和IE。

http://jsfiddle.net/Tinclon/2ega7yLt/7/

编辑：也适用于透明背景：http://jsfiddle.net/Tinclon/2ega7yLt/8/

css（当然）包括IE黑客，所以它有点长，但html非常简单：

<div class="card">
  <div class="content">
    <div class="cardFront">FRONT CONTENT</div>
    <div class="cardBack">BACK CONTENT</div>
    <div class="cardStatic">STATIC CONTENT</div>
  </div>
</div>

$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));

.card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    margin:80px 150px;
    width:320px;
    height:243px;
    vertical-align:top;
    position:absolute;
    display:block;
    font-size:25px;
    font-weight:bold;
}

.card .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;


    border: 1px solid grey;
    border-radius: 15px;
    position:relative;
    width: 100%;
    height: 100%;

}
.card.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.card .content .cardStatic {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    line-height:100px;
}

.card.applyflip .content .cardStatic {
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront {
    background-color: skyblue;
    color: tomato;
}

.card .content .cardBack {
    background-color: tomato;
    color: skyblue;
}

.card .content .cardFront, .card .content .cardBack {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height:200px;
    border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .content .cardBack, .card.applyflip .content .cardBack {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront, .card.applyflip .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }

Answer 2

这是一个更简单的翻转算法，它也适用于IE。 https://jsfiddle.net/mff4jzd2/8/

JAVASCRIPT：

        var state = 0;

        $('.container').on('click',function(){
            if(state == 0){

                state = 1;
                $('.front').addClass('flip-front');
                $('.back').addClass('flip-back');

            }
            else{

                state = 0;
                $('.front').removeClass('flip-front');
                $('.back').removeClass('flip-back');

            }   
        });

CSS：

    .container{

        width:170px;
        height:280px;
        display:inline-block;
        position:relative;
        transform: perspective(400px);
        cursor:pointer;

    }
    .front{

        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:blue;        
        transform: perspective(400px) rotateY(0deg);        
        backface-visibility: hidden;
        transition: 1.0s;
        opacity:1;
        box-shadow: 0 8px 6px -6px black;
    }
    .back{

        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:green;       
        transform: perspective(400px) rotateY(-180deg);         
        backface-visibility: hidden;
        transition: 1.0s;
        opacity:0;
        box-shadow: 0 8px 6px -6px black;
    }       
    .flip-front{
        opacity:0;
        transform: perspective(400px) rotateY(180deg);

    }
    .flip-back{
         opacity:1;  
         transform: perspective(400px) rotateY(0deg);
    }   

HTML：

<div class="container">

    <div class="back"></div>
    <div class="front"></div>

</div>

Answer 3

找到答案here。发表我自己更新的小提琴here - 这是css（我只是为了简洁而包括ms前缀）：

.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-ms-perspective: 1000;
perspective: 1000;
}

.card {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
transition: all 0.5s linear;
backface-visibility: hidden;
}

.card.flipped {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.front {
    background: red;
}
.back {
    background: #00f;
    transform: rotateY( 180deg );
}

.container:hover .card {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

这是一个用于翻转的按钮处理程序（除了悬停事件）：

$('button').click(function() {
    $('.card').toggleClass('flipped');
});

有趣（并且有些令人不安）IE10的答案正在翻转360度（css中的'翻转'类和悬停事件）。仍在我的脑袋周围。

这里希望他们尽快实现preserve-3d。

Answer 4

这是一个非常简单的Nicholls版本

flipping rectangle

#container {
 position: relative;
 height:362px;
 width: 282px;
 margin: 0 auto;
}

#container div {
 position:absolute;
 left:0;
 top:0;
 width:242px;
 height: 322px;
 padding:20px;
 background:#463;
 -ms-border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -webkit-transition: 1.5s ease-in-out;
 -moz-transition: 1.5s ease-in-out;
 -ms-transition: 1.5s ease-in-out;
 -o-transition: 1.5s ease-in-out;
 transition: 1.5s ease-in-out;
}

#container:hover div.upper {
 -webkit-transform: perspective(800px) rotateY(179.9deg);
 -moz-transform: perspective(800px) rotateY(179.9deg);
 transform: perspective(800px) rotateY(179.9deg);
}

<div id="container" aria-haspopup="true">    
   <div class="upper"></div>
</div>

我只留下翻转代码。

顺便说一下，Nicholls有很好的效果！

Answer 5

使用浏览器确定器JS或任何其他方法仅将CSS样式应用于IE。

然后使用以下代码：

.ie .flip-wrapper:hover .back {
    -ms-backface-visibility: visible;
}

.ie .flip-wrapper:hover .front {
    visibility: hidden;
}

Answer 6

正如OP所说，他们的博客上有一个问题的答案，但遗憾的是他没有quote：

  

注意W3C规范为此属性定义了preserve-3d的关键字值，表示不执行展平。目前，Internet Explorer 10不支持preserve-3d关键字。除了子元素的正常变换之外，你可以通过手动应用父元素的变换到每个子元素来解决这个问题。

总而言之，正常情况下，微软的浏览器严重已损坏。

在进一步调查中，似乎IE10中的插值引擎不完整或已损坏;在矩阵变换方面应用所有内容会导致在涉及多于一个轴的旋转时发生“随机”翻转。矩阵插值的唯一方法是手动处理所有插值。此外，似乎任何涉及直角的插值都会导致不一致的“随机”翻转。

我已成功插入所需的css，但是（缩小），代码长达数千行。所以，是的，IE可以做3d css，如果你不介意预编译和漫长的等待时间。