CSS3 - 3D 翻转动画 - IE10 transform-origin: preserve-3d workaround

Posted 2023-03-04

【中文标题】CSS3 - 3D 翻转动画 - IE10 transform-origin: preserve-3d workaround

【英文标题】：CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

【发布时间】：2012-11-08 13:54:39

【问题描述】：

浏览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

【问题讨论】：

请注意，IE for Win 10 技术预览版现在包括 preserve-3d 支持：blogs.msdn.com/b/ie/archive/2014/11/11/…

【参考方案1】：

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

这个适用于所有浏览器，没有那种奇怪的 360 度 IE 翻转，并且包括静态内容（位于卡片的两侧 - 我需要在右上角放置一个“翻转”按钮）两边）。

--我在最新版本的 Chrome、Firefox、Safari、Opera 和 IE 上进行了测试。

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

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

css（当然）包括 IE hack，所以有点长，但 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%   

【讨论】：

非常好！ - 我试图移植一个无限翻转动画。意味着它一直在运行。在 ff/chrome 中使用 animation: 3s coinFlip ... 可以正常工作，但 IE 只是反向显示背面......我需要以某种方式将这两件事混合在一起......你有什么想法吗？

试一试：jsfiddle.net/Tinclon/2ega7yLt/72 有趣的是，“静态”部分在 Chrome 中会闪烁一点，但在所有其他浏览器中似乎效果更好。

这是一个很好的答案，但如果你能准确解释“黑客”在哪里，那就更好了。

cmets 中的代码解释了“hack”：/* IE Hack.在卡片翻转的中途，设置可见性。在卡片翻转过程中保持其他浏览器可见。 */

线程迟到了，但你的代码帮了我很多忙！谢谢！

【参考方案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>

【参考方案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。

【参考方案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>

我只留下了翻转码。

顺便说一句，尼科尔斯效果很好！

【参考方案5】：

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

然后使用以下代码：

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


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

【参考方案6】：

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

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

总之，正常情况下，Microsoft 的浏览器严重损坏。

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

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