Html 卡片翻转IE动画问题
我已经创建了一个翻转动画,但是在IE浏览器特别是IE10、IE11上,当卡片翻转时,文本似乎正在反转 我添加了所有浏览器前缀,如下例所示,但仍然存在问题Html 卡片翻转IE动画问题,html,css,Html,Css,我已经创建了一个翻转动画,但是在IE浏览器特别是IE10、IE11上,当卡片翻转时,文本似乎正在反转 我添加了所有浏览器前缀,如下例所示,但仍然存在问题 IE 10/11不支持变换样式:preserve-3d属性 Src: 可能的解决办法: 和的可能重复@Phreak用链接更新了我的答案 <div class="flip"> <div class="card"> <div class="face front">Front</d
IE 10/11不支持
变换样式:preserve-3d
属性
Src:
可能的解决办法:
<div class="flip">
<div class="card">
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
-ms-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
-ms-transform-style: preserve-3d;
-ms-transition: 0.5s;
-o-transform-style: preserve-3d;
-o-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
backface-visibility: hidden; /* W3C */
-webkit-backface-visibility: hidden; /* Safari & Chrome */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
-o-backface-visibility: hidden; /* Opera */
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
background: blue;
background: white;
color: black;
cursor: pointer;
transform:rotatey(-180deg);
-ms-transform:rotatey(-180deg); /* IE 9 */
-moz-transform:rotatey(-180deg); /* Firefox */
-webkit-transform:rotatey(-180deg); /* Safari and Chrome */
-o-transform:rotatey(-180deg); /* Opera */
}