我正在尝试制作卡片翻转并显示其背面。它适用于所有其他浏览器,但不适用于Internet Explorer 11.卡片翻转动画Internet Explorer 11
我试着添加-ms-序言,但没有帮助。问题似乎是IE不支持css属性transform-style: preserve-3d
。
这里是一个的jsfiddle:https://jsfiddle.net/gbkq94hr/
HTML
<body>
<article>
<div id="card0" class="card">
<figure class="front">
</figure>
<figure class="back">
</figure>
</div>
</article>
</body>
JS
$(document).ready(function() {
var flipped = false;
var card = $("#card0");
card.click(function() { flipFunction();});
function flipFunction() {
if (flipped) {
flipped = false;
card.removeClass('flip');
} else {
card.addClass('flip');
flipped = true;
}
};
});
CSS
html {
height: 100%;
}
.flip {
transform: rotateY(180deg);
}
.card {
float:left;
width: 110px;
height: 139px;
cursor: pointer;
transform-style: preserve-3d;
transition: transform 1s;
position: relative;
}
figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-ms-backface-visibility:hidden;
}
.back {
background-color: blue;
transform: rotateY(-180deg);
}
.front {
z-index: 2;
background-color: red;
transform:rotateY(0deg);
}
article {
height: 114px;
width: 114px;
perspective: 1000;
}
编辑:
正如评论中所建议的那样,我试着遵循David Walshes的指示,但仍然无法使其工作。 https://jsfiddle.net/w9o2chmn/2/
请参阅https://davidwalsh.name/css翻转它可能有帮助 – RRR
这可以工作,但我不能让它在按钮点击工作。 :/ – Waltari
请检查我的回答 – RRR