CSS轉換RotateX在IE11中不起作用

Question

我有一個“促銷滾輪”，它使用CSS動畫旋轉立方體，在任何給定時間僅顯示立方體的四個側面之一。 立方體的旋轉將顯示下一個面。

 /*-- Animated Promo Roller --*/ #roller { width: 140px; height: 28px; position: absolute; } .face1, .face2, .face3, .face4 { font-size: 16px; line-height: 28px; font-weight: bold; color: #fff; text-align: center; width: 140px; height: 28px; margin: -8px 0px 10px 157px; position: absolute; background: #d71e44; /* Old browsers */ background: -moz-linear-gradient(top, #d71e44 0%, #c11e44 100%); /* FF3.6+ */ background: -moz-gradient(linear, left top, left bottom, color-stop(0%,#d71e44), color-stop(100%,#c11e44)); /* Chrome,Safari4+ */ background: -moz-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #d71e44 0%,#c11e44 100%); /* IE10+ */ background: linear-gradient(to bottom, #d71e44 0%,#c11e44 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d71e44', endColorstr='#c11e44',GradientType=0 ); /* IE6-9 */ } #roller .face1 { transform: translateZ(14px); } #roller .face2 { transform: rotateX(90deg) translateZ(14px); } #roller .face3 { transform: rotateX(180deg) translateZ(14px); } #roller .face4 { transform: rotateX(270deg) translateZ(14px); } @keyframes spincube { from,to { } 0% { transform: rotateX(0deg); } 14% { transform: rotateX(0deg); } 21% { transform: rotateX(-90deg); } 35% { transform: rotateX(-90deg); } 42% { transform: rotateX(-180deg); } 70% { transform: rotateX(-180deg); } 77% { transform: rotateX(-270deg); } 91% { transform: rotateX(-270deg); } 100% { transform: rotateX(-360deg); } } #roller { animation-name: spincube; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 12s; transform-style: preserve-3d; transform-origin: 7px 7px 0; } 

 <div id="roller"> <div class="face1">WAS R242,900</div> <div class="face2">NOW R227,900</div> <div class="face3">SAVE R15,000</div> <div class="face4">ON PROMO</div> </div> 

除了在Internet Explorer（當前已使用IE11測試）中，該代碼運行良好，在IE11中，旋轉動畫效果很好。 但是用於創建多維數據集的轉換transformX和translateZ不起作用。 因此，只有立方體的一面可見，其他三個面都隱藏在它的后面。

可以使它在IE11中工作嗎？

親切的問候
威廉

Answer 1

遲到總比不到好：

IE 不支持transform-style ， 例如 ，也可以參見此問題 （我敢肯定還有很多，但這是我發現的問題）

您可以嘗試為只有2面的這種效果創建一些CSS。 通過Mediaqueries，應該可以僅將IE11作為目標，因此您可以為IE隱藏此3d動畫，而僅向IE用戶顯示此雙面動畫。 不理想，但總比沒有好。

我通過復制粘貼大衛·沃爾什（David Walsh）網站上的代碼來創建一個小提琴，他通過創建它做了非常出色的工作。

  /* simple */ .flip-container { -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -ms-transform: perspective(1000px); -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; border: 1px solid #ccc; } /* .flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); filter: FlipH; -ms-filter: "FlipH"; } */ /* START: Accommodating for IE */ .flip-container:hover .back, .flip-container.hover .back { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .flip-container:hover .front, .flip-container.hover .front { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* END: Accommodating for IE */ .flip-container, .front, .back { width: 320px; height: 427px; } .flipper { -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -ms-transition: 0.6s; -moz-transition: 0.6s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; -webkit-transform-style: preserve-3d; -webkit-transform: rotateY(0deg); -moz-transition: 0.6s; -moz-transform-style: preserve-3d; -moz-transform: rotateY(0deg); -o-transition: 0.6s; -o-transform-style: preserve-3d; -o-transform: rotateY(0deg); -ms-transition: 0.6s; -ms-transform-style: preserve-3d; -ms-transform: rotateY(0deg); transition: 0.6s; transform-style: preserve-3d; transform: rotateY(0deg); position: absolute; top: 0; left: 0; } .front { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); background: lightgreen; z-index: 2; } .back { background: lightblue; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .front .name { font-size: 2em; display: inline-block; background: rgba(33, 33, 33, 0.9); color: #f8f8f8; font-family: Courier; padding: 5px 10px; border-radius: 5px; bottom: 60px; left: 25%; position: absolute; text-shadow: 0.1em 0.1em 0.05em #333; display: none; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); } .back-logo { position: absolute; top: 40px; left: 90px; width: 160px; height: 117px; background: url(logo.png) 0 0 no-repeat; } .back-title { font-weight: bold; color: #00304a; position: absolute; top: 180px; left: 0; right: 0; text-align: center; text-shadow: 0.1em 0.1em 0.05em #acd7e5; font-family: Courier; font-size: 22px; } .back p { position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; padding: 0 20px; font-size: 18px; } /* vertical */ .vertical.flip-container { position: relative; } .vertical .back { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } .vertical.flip-container .flipper { -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin: 100% 213.5px; transform-origin: 100% 213.5px; } /* .vertical.flip-container:hover .flipper { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); } */ /* START: Accommodating for IE */ .vertical.flip-container:hover .back, .vertical.flip-container.hover .back { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } .vertical.flip-container:hover .front, .vertical.flip-container.hover .front { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); } /* END: Accommodating for IE */ 

 <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front" style='background: #adadad no-repeat 0px 0px;'> <span class="name">David Walsh</span> </div> <div class="back" style="background: rgb(248, 248, 248);"> <div class="back-logo"></div> <div class="back-title">@davidwalshblog</div> <p>Mozilla Web Developer, MooTools &amp; jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p> </div> </div> </div>