使用3D变换翻转不工作在IE11（我的是不同） [英] Using 3D transform flip is not working in IE11 (mine is different)
问题描述
我研究CSS3 3D变换，最后我得到一些代码为CSS3 3D翻转动作。因此，除了 Internet Explorer（IE11），它在所有浏览器中都可正常工作。
所以我调查这个问题在stackoverflow.com。我有一些解决方案，但不幸的是，这些对我没有用。因此，请仔细查看我的jsfiddle链接，并为此提供一些解决方案。
CODE：
$（'＃one'）。click（function（）{if（$（this）.is（'：checked'））{$（＃card）。 add（function（）{}）; $（'＃two'）。add（function（）{return'app' if（$（this）.is（'：checked'））{$（＃card）。addClass（flipped）; $（back #append）。append（< p& ; / p>）}}）; $（'＃three'）。click（function（）{if（$（this）.is（'：checked'））{$（＃card）。addClass flipped）; $（; back #append）。append（< p> third one< / p& #card）。removeClass（flipped）;}）;
.container {width：200px; height：260px;位置：相对; -ms-perspective：800px;透视：800px;}＃card {width：100％;高度：100％; position：absolute; -ms-transform-style：preserve-3d; transform-style：preserve-3d; transition：transform 1s;}＃card figure {display：block; position：absolute; width：100％;高度：100％; backface-visibility：hidden; margin：0px; padding：0px; } #card .front {background：red;}＃card .back {background：blue; -ms-transform：rotateY（180deg）; transform：rotateY（180deg）;}＃card.flipped {-ms-transform：rotateY（180deg）; transform：rotateY（180deg）;}＃close {position：absolute; bottom：0px; right：0px; color：#fff;}< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> ;< / script>< section class =container> < div id =card> < figure class =front> < input type =checkboxid =one/> one< br>< / br> < input type =checkboxid =two/> two< br>< / br> < input type =checkboxid =three/> three< br>< / br> < / figure> < figure class =back> < div id =append>< / div> < div id =close>< button> close< / button>< / div> < / figure> < / div>< / section>
请参阅以下链接： http://jsfiddle.net/Rayudu/jy0z8dy1/
请仔细点击复选框，然后翻页就会发生，并点击关闭按钮删除翻页。
我之前遇到过同样的问题，发现使背面可见的翻转状态解决它。所以对于你的情况，添加以下行应该解决IE11（以及IE10）中的问题。
＃card.flipped figure {
backface-visibility：visible;
}
$ '）.click（function（）{if（$（this）.is（'：checked'））{$（＃card）。addClass（flipped）; $（back #append）。 append（< p> First one< / p>）}}）; $（'＃two'）。click（function（）{if（$（this）.is（'：checked'））{$ （＃card）。addClass（flipped）; $（back #append）。append（< p> second one< / p& .click（function（）{if（$（this）.is（'：checked'））{$（＃card）。addClass（flipped）; < p>第三个< / p>）}}）; $（'＃close'）。click（function（）{$（＃card）。removeClass（flipped）;}） / code>
.container {width：200px; height：260px;位置：相对; -ms-perspective：800px;透视：800px;}＃card {width：100％;高度：100％; position：absolute; -ms-transform-style：preserve-3d; transform-style：preserve-3d; transition：transform 1s;}＃card figure {display：block; position：absolute; width：100％;高度：100％; backface-visibility：hidden; margin：0px; padding：0px;}＃card .front {background：red;}＃card .back {background：blue; -ms-transform：rotateY（180deg）; transform：rotateY（180deg）;}＃card.flipped {-ms-transform：rotateY（180deg）; transform：rotateY（180deg）;}＃card.flipped figure {backface-visibility：visible;}＃close {position：absolute; bottom：0px; right：0px; color：#fff;}
< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script> ;<section class =container> < div id =card> < figure class =front> < input type =checkboxid =one/> one< br>< / br> < input type =checkboxid =two/> two< br>< / br> < input type =checkboxid =three/> three< br>< / br> < / figure> < figure class =back> < div id =append>< / div> < div id =close> < button> close< / button> < / div> < / figure> < / div>< / section>
注意：添加上述属性设置似乎导致Google Chrome浏览器中出现一些闪烁，可以通过覆盖GC的设置a href =http://jsfiddle.net/webtiki/v87462tt/ =nofollow>这个小提琴由 web-tiki ）。一般来说，在非前缀（标准）属性之后添加前缀版本并不是一个好方法，但这不是一个很大的问题，因为我们专门为Chrome设计。
I investigate on CSS3 3d transform and finally I got some code for CSS3 3d flip action. So it's working fine in all browsers except Internet Explorer (IE11). So I investigated on this issue in stackoverflow.com. I got some solutions but unfortunately those are not useful for me. So please kindly have a look at my jsfiddle link and provide some solution for this.
CODE:
$('#one').click(function() {
if ($(this).is(':checked')) {
$("#card").addClass("flipped");
$(".back #append").append("<p>First one</p>")
}
});
$('#two').click(function() {
if ($(this).is(':checked')) {
$("#card").addClass("flipped");
$(".back #append").append("<p>second one</p>")
}
});
$('#three').click(function() {
if ($(this).is(':checked')) {
$("#card").addClass("flipped");
$(".back #append").append("<p>third one</p>")
}
});
$('#close').click(function() {
$("#card").removeClass("flipped");
});
.container {
width: 200px;
height: 260px;
position: relative;
-ms-perspective: 800px;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 1s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
margin:0px;
padding:0px;
}
#card .front {
background: red;
}
#card .back {
background: blue;
-ms-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card.flipped {
-ms-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#close{
position:absolute;bottom:0px;right:0px;color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="card">
<figure class="front">
<input type="checkbox" id="one"/>one<br></br>
<input type="checkbox" id="two"/>two<br></br>
<input type="checkbox" id="three"/>three<br></br>
</figure>
<figure class="back">
<div id="append"></div>
<div id="close"><button>close</button></div>
</figure>
</div>
</section>
for more details see this link: http://jsfiddle.net/Rayudu/jy0z8dy1/
kindly click on check box then flip will happen and click on close button to remove flip.
I had run into the same problem earlier and found that making the back-face visible in the flipped state solves it. So for your case, adding the below lines should fix the issue in IE11 (and also IE10).
#card.flipped figure{
backface-visibility: visible;
}
$('#one').click(function() {
if ($(this).is(':checked')) {
$("#card").addClass("flipped");
$(".back #append").append("<p>First one</p>")
}
});
$('#two').click(function() {
if ($(this).is(':checked')) {
$("#card").addClass("flipped");
$(".back #append").append("<p>second one</p>")
}
});
$('#three').click(function() {
if ($(this).is(':checked')) {
$("#card").addClass("flipped");
$(".back #append").append("<p>third one</p>")
}
});
$('#close').click(function() {
$("#card").removeClass("flipped");
});
.container {
width: 200px;
height: 260px;
position: relative;
-ms-perspective: 800px;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 1s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
margin: 0px;
padding: 0px;
}
#card .front {
background: red;
}
#card .back {
background: blue;
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#card.flipped {
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#card.flipped figure {
backface-visibility: visible;
}
#close {
position: absolute;
bottom: 0px;
right: 0px;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="card">
<figure class="front">
<input type="checkbox" id="one" />one
<br></br>
<input type="checkbox" id="two" />two
<br></br>
<input type="checkbox" id="three" />three
<br></br>
</figure>
<figure class="back">
<div id="append"></div>
<div id="close">
<button>close</button>
</div>
</figure>
</div>
</section>
Note: Addition of the above property setting seems to be causing some flickers in Google Chrome and that could be overcome by over-riding the setting for GC alone (like in this fiddle kindly contributed by web-tiki). Generally it is not a good approach to add prefixed versions after the un-prefixed (standard) property, but it is not much of an issue here as we are over-riding specifically for Chrome.
这篇关于使用3D变换翻转不工作在IE11（我的是不同）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
