CSS CSS3 - 3D 翻转动画 - IE10 变换原点：保留 3d 解决方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13474210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround
提问by 2ne
After looking through IE10's developer blogI have found that they do not support the preserve-3d setting.
在浏览了 IE10 的开发者博客后，我发现它们不支持保留 3d 设置。
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.
他们确实提供了一种解决方法，但我似乎无法使其正常工作。我下面的示例适用于 Safari、Chrome 和 Firefox，但不适用于 IE10。如果有人能帮助我实现这一目标，我将不胜感激。
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
单击时，框应围绕 Y 轴旋转以显示一些文本和绿色背景色。这在 IE10 中并非如此
My example:http://codepen.io/2ne/pen/zEpge
我的例子：http : //codepen.io/2ne/pen/zEpge
Part of code:
部分代码：
HTML
HTML
<div class="flip-wrapper">
<div class="front"></div>
<div class="back">IE10 SUCKS</div>
</div>
CSS
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
2ne
采纳答案by Tinclon
I also couldn't seem to find a good example of this anywhere, so I spent someway 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).
这个适用于所有浏览器，没有那种奇怪的 360 度 IE 翻转，并且包括静态内容的规定（位于卡的两侧 - 我需要在两侧的右上角放置一个“翻转”按钮） .
--I tested on latest versions of Chrome, Firefox, Safari, Opera, and IE.
--我在最新版本的 Chrome、Firefox、Safari、Opera 和 IE 上进行了测试。
http://jsfiddle.net/Tinclon/2ega7yLt/7/
http://jsfiddle.net/Tinclon/2ega7yLt/7/
Edit: Also works with transparent backgrounds: http://jsfiddle.net/Tinclon/2ega7yLt/8/
编辑：也适用于透明背景：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:
css（当然）包括 IE hacks，所以它有点长，但 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% { } }
回答by MarzSocks
Here is a far simpler flip algorithm, which will also work in IE. https://jsfiddle.net/mff4jzd2/8/
这是一个简单得多的翻转算法，它也适用于 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:
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:
HTML：
<div class="container">
<div class="back"></div>
<div class="front"></div>
</div>
回答by klugout
here is a very simple version of Nicholls
这是 Nicholls 的一个非常简单的版本
#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>
I left only the flip code.
我只留下翻转代码。
Btw, great effects Nicholls !
顺便说一句，Nicholls 效果很好！
回答by anarchista21
Use a browser-determiner JS or any other method to apply CSS-styles to IE only.
使用浏览器确定器 JS 或任何其他方法将 CSS 样式仅应用于 IE。
Then use the following code:
然后使用以下代码：
.ie .flip-wrapper:hover .back {
-ms-backface-visibility: visible;
}
.ie .flip-wrapper:hover .front {
visibility: hidden;
}
回答by ericb
Found the answer here. Posted my own updated fiddle here- this is the css (I included ms prefixes only for brevity):
在这里找到了答案。在这里发布了我自己更新的小提琴- 这是 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);
}
Here is a button handler for flipping (in addition to the hover event):
这是一个用于翻转的按钮处理程序（除了悬停事件）：
$('button').click(function() {
$('.card').toggleClass('flipped');
});
Interesting (and somewhat troubling) that the answer for IE10 is flipping by 360 degrees (the 'flipped' class and hover event in the css). Still wrapping my head around that one.
有趣（也有点令人不安），IE10 的答案是 360 度翻转（css 中的“翻转”类和悬停事件）。仍然围绕着我的头。
Here's hoping they implement preserve-3d soon.
希望他们尽快实施preserve-3d。
回答by smaudet
As the OP notes, there is an answer to the question on their blog, but sadly he did not quote:
正如 OP 所指出的，他们的博客上有这个问题的答案，但遗憾的是他没有引用：
Note The W3C specification defines a keyword value of preserve-3d for this property, which indicates that flattening is not performed. At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applyingthe parent element's transform to each of the child elementsin addition to the child element's normal transform.
注意 W3C 规范为此属性定义了一个关键字值 preserve-3d，表示不执行展平。目前，Internet Explorer 10 不支持preserve-3d 关键字。除了子元素的正常变换之外，您还可以通过手动将父元素的变换应用于每个子元素来解决此问题。
In summary, as normal, Microsoft's Browser is badly broken.
总之，像往常一样，微软的浏览器被严重破坏了。
On further investigation, it seems that the interpolation engine is incomplete or broken in IE10; applying everything in terms of matrix transforms causes 'random' flips to occur when rotation about more than one axis is involved. The only method of matrix interpolation would be to manually handle all interpolation manually. Further, it seems that any interpolation where a right angle is involved will cause inconsistent 'random' flipping.
经过进一步调查，IE10中的插值引擎似乎不完整或损坏；当涉及多个轴的旋转时，根据矩阵变换应用所有内容会导致“随机”翻转。矩阵插值的唯一方法是手动处理所有插值。此外，似乎任何涉及直角的插值都会导致不一致的“随机”翻转。
I have succeeded in interpolating the required css, however (minified), the code is thousands of lines long. So, yeah, IE can do 3d css, if you don't mind pre-compiling and long wait-times.
我已成功插入所需的 css，但是（缩小），代码长达数千行。所以，是的，IE 可以做 3d css，如果你不介意预编译和长时间的等待。
