我在 atm 上工作的代码有问题,在 Chrome 和 FF 中工作完全正常,但在 IE 中没有。
基本上这是一个简单的悬停效果,游戏在悬停在其上时在 Y 轴上翻转 180 度。背面可见性设置为隐藏,但在 IE 中并非如此。任何想法为什么?正在考虑引入一些 jquery 来解决甚至更旧版本的 IE 的问题..
HTML:
<div class="flip-container game">
<div class="flipper">
<a href="#">
<div class="front">
<h1>
Front
</h1>
</div>
<div class="back">
<span class="game-title">
<h3>BACK</h3>
<span class="mob-icon"></span>
</span>
<button class="button green"><a href="#">Play Now</a></button>
<button class="blue button"><a href="#">More Info</a></button>
</div>
</a>
</div>
</div>
CSS:
/* do some flipping */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg) scale(1.05);
position: relative;
z-index: 2;
}
.flip-container, .front, .back {
width: 185px;
height: 145px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
background-color: #333;
color: #000;
text-align: center;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #010b15;
border: solid 2px #034baf;
}
fiddle - https://jsfiddle.net/Lcdrugvn/3/
最佳答案
找到解决方案-
/* do some flipping */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
width: 185px;
height: 145px;
}
.front {
z-index: 2;
transform: rotateY(0deg);
background-color: #333;
color: #000;
text-align: center;
}
.back {
transform: rotateY(-180deg);
background-color: #010b15;
border: solid 2px #034baf;
}
关于jquery - IE11 问题与变换 rotateY 和背面可见性悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36747899/