CSS3 - 3D翻转动画 - IE10变换产地：保留-3D解决办法

Question

通过IE10的developer blog寻找后，我发现，他们不支持保留-3D设置。

他们提供了一个解决方法，但我似乎无法得到它的工作。我的下面的例子适用于Safari，Chrome和Firefox，但不适用于IE10。如果有人能帮助我实现这一点，我会非常感激。

这些箱子应该绕Y轴旋转，上点击显示一些文本和一个绿色的背景颜色。这不是在IE10的情况下

我的例子：

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

： http://codepen.io/2ne/pen/zEpge

部分代码

Answer 1

找到了答案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 2

由于OP笔记，有一个答案，以自己的博客上的问题，但遗憾的是他没有quote：

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

综上所述，正常情况下，微软浏览器很差破。

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

我已经成功地插所需的CSS，但（精缩），代码为成千上万的长线路。所以，是的，IE可以做3d css，如果你不介意预编译和漫长的等待时间。

Answer 3

这里是一个非常简单的版本李启

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 4

我也无法在任何地方找到一个很好的例子，所以我花了 一些 太多的时间做自己的。

这个适用于所有浏览器，没有奇怪的360度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 5

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

然后使用下面的代码：

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

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

Answer 6

下面是一个简单得多的翻转算法，这也将在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>