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>