问题描述
我使用css 3D旋转来翻转图片，它在Chrome和Firefox上效果很好。 但是当使用野生动物园时，当图片翻转到背面时，它只是闪烁而消失了。
我已经使用-webkit-backface-visibility：hidden和-webkit-transform。
我还试图通过将-webkit-backface-visibility：hiddened隐藏到正面和背面图片的容器（.inner）中来进行修复。这会使图片粘住，但按钮也会冻结。
我该如何解决？
To see the question clearly,please open in safari:
HTML：
<div class="us"> <h2 id="northAmerica" class="usTitle"><a href="#">rotate</a></h2>
<div class="tags">
<!--tag1-->
<div class="flip-card">
<section class="tag inner">
<div class="tag front">
<div class="r1 ">
<img src="https://images-na.ssl-images-amazon.com/images/G/01/img18/home/journeys/OTJmY2FmYTAt/OTJmY2FmYTAt-ZGUyZWFmODIt-w758._SY608_CB408650445_.jpg" alt="">
</div>
</div><!--front-->
<div class="back ny pop">
<div class="back"></div>
<div class="popup"></div>
<!-- <img class="back" src="jfk.JPG" alt="NY"> -->
<a>
<button class="truthButton">Ok</button>
</a>
<a>
<button class="flipButton">No</button>
</a>
</div> <!--back-->
</section> <!--tag inner-->
</div> <!--flip-card-->
<div>
CSS：
/*==============
Flip card
===============*/
.flip-card {
background-color: transparent;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.inner { /*also tag*/
position: relative;
/*
width: 100%;
height: 100%; */
-webkit-transition: 0.6s;
transform 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-Box-shadow: 0px 2px 8px 0 black;
Box-shadow: 0px 2px 8px 0 black;
}
.flip-card:hover .inner {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.front,.back {
position: absolute;
/* width: 100%;
height: 100%; */
/* -webkit-transform-style: preserve-3d;
transform-style: preserve-3d; */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
width: 20em;
height: 15em;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
.flipButton{
bottom: 3%;
right: 20%;
}
.truthButton{
bottom: 3%;
left: 20%;
}
.flipButton,.truthButton{
position: absolute;
color: var(--clr-pink);
border: 1px solid var(--clr-blue);
border-radius: 10px;
padding: .2em .3em;
font-size: var(--fs-body);
background-color: var(--clr-blue);;
background-repeat:no-repeat;
cursor:pointer;
overflow: hidden;
outline:none;
transition: transform 0.6s;
}
.truthButton::after,.flipButton::after {
content: 'K';
font-size: .1em;
color: var(--clr-blue);
position: absolute;
bottom: 0;
right: 0;
}
.truthButton:hover,.flipButton:hover {
color: var(--clr-blue);
background:var(--clr-pink);
border: 1px solid var(--clr-pink);
transform: scale(1.1);
}
/*==============
HEADER
===============*/
header {
max-width: 100%;
margin: 0 auto;
}
.title a {
font-size: var(--fs-h2);
}
.title,.usTitle,li,p {
color: var(--clr-blue);
text-align: center;
/* font-weight: 700; */
}
p{
font-size: var(--fs-h3);
}
.usTitle {
font-size: var(--fs-h2);
}
li {
border: 1px solid var(--clr-blue);
border-radius: 10px;
padding: .5em 0;
margin: .5em 0;
}
li:hover {
border: 1px solid var(--clr-pink);
/* background: var(--clr-pink); */
}
a {
color: var(--clr-blue);
font-size: var(--fs-h3);
font-weight: 500;
}
a:hover {
color: var(--clr-pink);
}
@media (min-width: 700px) {
header {
max-width: 100%;
}
nav {
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
-webkit-Box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
li {
padding: .5em;
margin: .5em;
}
}
/*==============
TAGS
===============*/
.tags {
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-Box-pack: center;
-ms-flex-pack: center;
justify-content: center;
/*space-evenly*/
}
/*==============
TAG
===============*/
.r4 {
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
}
.r4 .number {
margin-right: 3em;
}
.r4 .date {
margin-right: 1.5em;
}
.r6 {
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
-webkit-Box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.r1 img {
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
max-width: 18em;
width: 80%;
margin: 0 auto;
}
/*compare to position absolute this is better solution to position skyteam*/
.tag {
/* position: relative; */
max-width: 100%;
width: 20em;
height: 15em;
display: -ms-grid;
display: grid;
-ms-flex-line-pack: center;
align-content: center;
background: #fff;
/* background:url("https://cdn.pixabay.com/photo/2017/08/01/14/14/white-2565766__480.jpg"); */
-ms-grid-rows: (0.3fr)[8];
grid-template-rows: repeat(8,0.3fr);
grid-template-areas: "r1" "r2" "r3" "r4" "." "r6" "r7" "r8";
/* -webkit-backface-visibility: hidden; */
}
/*==============
BASE
===============*/
*,*::before,*::after {
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
}
:root {
--clr-dark: #232323;
--clr-pink: #ff3385;
--clr-blue: #80d4ff;
--ff-main: 'Roboto Mono',monospace;
--fs-h1: 3rem;
--fs-h2: 2.5rem;
--fs-h3: 1.8rem;
--fs-body: 1.25rem;
}
html,body {
background: #232323;
font-family: var(0ff-main);
}
a,li {
cursor: pointer;
text-decoration: none;
list-style: none;
}
@media (min-width: 360px) and (max-width: 480px) {
:root {
--fs-h1: 1.5rem;
--fs-h2: 1.25rem;
--fs-h3: .8rem;
--fs-body: 0.25rem;
}
}
.ny{
background-image: url(https://cdn.pixabay.com/photo/2016/10/28/13/09/usa-1777986__480.jpg);
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）