为什么我的翻转动画不工作在chrome和safari浏览器
Why does my flip animation not work in chrome and safari?
第一次发帖。对不起,如果我的代码有点乱,我仍然是一个初学者,我一直试图使这个翻转动画在chrome和safari上工作。它可以在firefox上工作,但我不明白为什么翻转动画不能在chrome上正常工作。
function flip(){
document.getElementById('card').classList.toggle('flip');
}
function flip2(){
document.getElementById('card2').classList.toggle('flip');
}
function flip3(){
document.getElementById('card3').classList.toggle('flip');
}
h4{
font-size: 2em;
}
#week-wrap {
height: auto;
max-width: 100%;
width: auto;
background-color: #efefef;
text-align: center;
}
#card, #card2, #card3 {
text-align: center;
position: relative;
display: inline-block;
max-width: 30%;
cursor:pointer;
margin: 1%;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-style: solid;
}
#back{
top:0;
left:0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
color:white;
background-color: teal;
width: 100%;
height: 100%;
}
#back{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.figcaption {
text-align: center;
width:100%;
height:0;
font-size: 4em;
line-height: 0;
color:white;
position:absolute;
top:10%;
z-index:1;
}
#card img {
-webkit-display:block;
display:block;
max-width: 100%;
}
#card2 img {
display:block;
max-width: 100%;
}
#card3 img {
display:block;
max-width: 100%;
}
.flip{
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<div id="week-wrap">
<div id="card" onclick="flip()">
<div class="figcaption">Front</div>
<img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" />
<div id="back"><h3>Back</h3>
</div>
</div>
<div id="card2" onclick="flip2()">
<div class="figcaption">Front </div>
<img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" />
<div id="back"><h3>Back</h3>
</div>
</div>
<div id="card3" onclick="flip3()">
<div class="figcaption">Front </div>
<img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" />
<div id="back"><h3>Back</h3> </div>
</div>
</div>
在back上设置z-index,去掉相同的id,使其成为一个类。
function flip() {
document.getElementById('card').classList.toggle('flip');
}
function flip2() {
document.getElementById('card2').classList.toggle('flip');
}
function flip3() {
document.getElementById('card3').classList.toggle('flip');
}
h4 {
font-size: 2em;
}
#week-wrap {
height: auto;
max-width: 100%;
width: auto;
background-color: #efefef;
text-align: center;
}
#card,
#card2,
#card3 {
text-align: center;
position: relative;
display: inline-block;
max-width: 30%;
cursor: pointer;
margin: 1%;
-webkit-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-style: solid;
}
.back {
top: 0;
left: 0;
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
color: white;
background-color: teal;
width: 100%;
height: 100%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.figcaption {
text-align: center;
width: 100%;
height: 0;
font-size: 4em;
line-height: 0;
color: white;
position: absolute;
top: 10%;
z-index: 1;
}
#card img {
-webkit-display: block;
display: block;
max-width: 100%;
}
#card2 img {
display: block;
max-width: 100%;
}
#card3 img {
display: block;
max-width: 100%;
}
.flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<div id="week-wrap">
<div id="card" onclick="flip()">
<div class="figcaption">Front</div>
<img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" />
<div class="back">
<h3>Back</h3>
</div>
</div>
<div id="card2" onclick="flip2()">
<div class="figcaption">Front</div>
<img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" />
<div class="back">
<h3>Back</h3>
</div>
</div>
<div id="card3" onclick="flip3()">
<div class="figcaption">Front</div>
<img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" />
<div class="back">
<h3>Back</h3>
</div>
</div>
</div>
然后你会说你不能点击背面翻转回来。这与backface-visibility: hidden;
规则有关。
相关文章:
- JS代码在jsbin中有效,在jsfiddle或Chrome/Safari中无效
- JQuery图像大小计算没有'不能在Chrome/Safari中工作
- 在Chrome/Safari中使用History.pushState重复历史记录条目
- getComputedStyle报告Chrome / Safari / Firefox和IE11之间的不同高度
- 下载画布图像 png Chrome/Safari
- jquery javascript chrome/safari issue
- 外部js click函数在Chrome / Safari中不起作用
- Javascript FF Slow Chrome/Safari FAST
- 创建 Chrome/Safari 扩展程序的先决条件
- Ajax 调用在 chrome/safari 中工作,但在 ff 和 ie 中失败
- Ajax在Chrome / Safari中提交作品,但不能在Firefox / IE中提交作品
- JQuery easySlider 在 Chrome/Safari 中不起作用
- Using onafterprint in Chrome & Safari
- 有了弹性弹跳,Chrome/Safari知道我的手指何时离开触控板.JS知道吗
- 导航栏在移动上折叠,滚动chrome/safari
- Chrome/Safari(webkit)中的JQuery Overlay无法进行更改
- 代码与Firefox一起工作,但不与Chrome, Safari
- jquery脚本不工作在chrome, safari和部分opera, FF是可以的
- 如何在webkit浏览器(chrome/safari)中以编程方式打开新选项卡
- 在Chrome/Safari中剥离表:tr:n -child td的bug