CSS3 - 3D翻转动画 - IE10 transform-origin：preserve-3d解决方法 [英] CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround

问题描述

浏览IE10的开发人员博客我发现他们不支持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; 
透视：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：forward; 
 -moz-animation-fill-mode：forward; 
 -o-animation-fill-mode：forward; 
 -ms-animation-fill-mode：forward; 
 animation-fill-mode：forward; 
} 
  

2ne

解决方案

我也不能在这里找到一个很好的例子，所以我用一些方式太多时间做自己的。

这一个在所有浏览器上都可以使用，没有奇怪的360deg IE翻转，包括静态内容的提供（存在于卡的两侧 - 我需要将它们

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

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

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

css（当然）包括IE hack，所以有点长，但html很简单： p>

 < div class =card> 
< div class =content> 
< div class =cardFront> FRONT CONTENT< / div> 
< div class =cardBack> BACK CONTENT< / div> 
< div class =cardStatic>静态内容< / div> 
< / div> 
< / div> 
  

  $（'。card'）。hover（function（）{$（'。card'）。toggleClass（'applyflip'）;}。 
  

  .card {
透视：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; 
显示：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; 
 
 / *内容背面是可见的，所以静态内容仍然出现* / 
 backface-visibility：visible; 
 -webkit-backface-visibility：visible; 
 -moz-backface-visibility：visible; 
 -o-backface-visibility：visible; 
 -ms-backface-visibility：visible; 
 
 
 border：1px solid gray; 
 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 {
 / *通过卡片的一半翻转，将静态内容旋转到0度* / 
 transition ：0s线性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 {
 / *一半的卡片翻转，将静态内容旋转到-180度 - 以取消翻转和取消镜像静态内容* / 
 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 {
 / *背面可见性对于除IE之外的所有其他应用程序都很有用。因此，我们在IE中标记背面可见，并管理可见性我们自己* / 
 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：rotationY（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。一半的卡片翻转，设置可见性。让其他浏览器在整个卡片翻转中可见。 * / 
 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。一半的卡片翻转，设置可见性。让其他浏览器在整个卡片翻转中可见。 * / 
 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; }到{visibility：visible; }} 
 @ -webkit-keyframes stayvisible {from {visibility：visible; }到{visibility：visible; }} 
 @ -moz-keyframes stayvisible {from {visibility：visible; }到{visibility：visible; }} 
 @ -o-frameframes stayvisible {from {visibility：visible; }到{visibility：visible; }} 
 @ -ms-keyframes donothing {0％{} 100％{}} 
  

After looking through IE10's developer blog I have found that they do not support the preserve-3d setting.

They do offer a workaround, but I can not seem to get it working. My example below works in Safari, Chrome and Firefox but not IE10. If anyone could help me achieve this I would be very thankful.

The boxes should rotate around the Y axis on click to show some text and a green background color. This is not the case in IE10

My example: http://codepen.io/2ne/pen/zEpge

Part of code:

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

解决方案

I also couldn't seem to find a good example of this anywhere, so I spent some way too much time making my own.

This one works on all browsers, does not have that weird 360deg IE flip, and includes provision for static content (that lives on both sides of the card - which I needed to put a 'flip' button at the top right of both sides).

--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.

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

Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/

The css (of course) includes IE hacks, so it's a bit long, but the html is quite straightforward:

<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% { } }

这篇关于CSS3 - 3D翻转动画 - IE10 transform-origin：preserve-3d解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！