Html 如何在IE 10和IOS Safari 8.1上实现简单的CSS 3D翻转?
我创建了一个简单的双面翻页卡 悬停时,它将沿y轴旋转180度以使另一侧可见 它可以在chrome上正常工作,但在IE 10和11上,它显示的是镜像的正面,而不是卡的背面。从外观上看,我认为问题在于Html 如何在IE 10和IOS Safari 8.1上实现简单的CSS 3D翻转?,html,css,Html,Css,我创建了一个简单的双面翻页卡 悬停时,它将沿y轴旋转180度以使另一侧可见 它可以在chrome上正常工作,但在IE 10和11上,它显示的是镜像的正面,而不是卡的背面。从外观上看,我认为问题在于变换样式:preserve-3dcss属性 在IE和IOS safari 8.1上有没有办法实现这个功能 请查看下面的fiddle,并在IE和Chrome上试用以查看问题 HTML代码: <div class="container"> <div class="flipp
变换样式:preserve-3d
css属性
在IE和IOS safari 8.1上有没有办法实现这个功能
请查看下面的fiddle,并在IE和Chrome上试用以查看问题
HTML代码:
<div class="container">
<div class="flipper">
<div class="front">
<p > front </p>
</div>
<div class="back">
<p> back</p>
</div>
</div>
</div>
前面
背
这一款适用于最新版本的浏览器Chrome、Firefox、IE、Opera和Safari
演示
这一款适用于最新版本的浏览器Chrome、Firefox、IE、Opera和Safari 演示
我在今年早些时候创建的一个关于页面中遇到了同样的问题。我最终放弃了这个想法,因为我在那些浏览器上找不到一个3D转换的解决方案。只是一直在看这个页面,因为它实际上在IE11上工作。如果你知道它是如何工作的,请告诉我。谢谢这是一个商业项目,因此必须至少支持ie9。我只是不认为3D动画可以再制作一年左右。我在今年早些时候创建的一个关于页面中遇到了同样的问题。我最终放弃了这个想法,因为我在那些浏览器上找不到一个3D转换的解决方案。只是一直在看这个页面,因为它实际上在IE11上工作。如果你知道它是如何工作的,请告诉我。谢谢这是一个商业项目,因此必须至少支持ie9。我只是不认为3D flips可以再生产一年左右。谢谢,我将把它作为第二个选项,因为我正在寻找使用纯html和css的解决方案。谢谢,我将把它作为第二个选项,因为我正在寻找使用纯html和css的解决方案。
<div class="card">
<div class="content">
<div class="cardFront">Front</div>
<div class="cardBack">Back</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:100px;
height:200px;
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 .cardFront {
background-color: skyblue;
color: yellow;
}
.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% { } }