尝试单击此挂卡背面的链接的左侧”在Chrome中不起作用。但是,当我将鼠标悬停在链接的right一侧时,我看到了指针光标并能够与之交互:
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
.card {
-webkit-perspective: 1000px;
perspective: 1000px;
display: inline-block;
}
.card .card-inner {
position: relative;
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
-o-transition: transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
}
.card .card-inner .card-face {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .card-inner .card-face.card-back {
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .card-inner .card-face .card-face-inner .card-face-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 22px;
}
.card:hover .card-inner {
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .card-back {
background: steelblue;
}
<div class="card">
<div class="card-inner">
<img src="https://via.placeholder.com/400x500?text=%20" alt="" />
<div class="card-face card-front">
<div class="card-face-inner">
<div class="card-face-content">
Front
</div>
</div>
</div>
<div class="card-face card-back">
<div class="card-face-inner">
<div class="card-face-content">
<a href="#foo">Back</a>
</div>
</div>
</div>
</div>
</div>
如何解决此问题,以便整个链接都可单击?我猜想这与backface-visibility
有关。我遇到了this StackOverflow answer,但是我认为该解决方案已经在此处实现,包括以下行:
.card .card-inner {
...
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
我不知道原因,但这很可能是一个错误,因为它可以按预期在Firefox上运行。将pointer-events: none;
添加到.card-inner
并将pointer-events: auto
添加到.card-face
是可行的,只有上帝知道原因。
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
.card {
-webkit-perspective: 1000px;
perspective: 1000px;
display: inline-block;
}
.card .card-inner {
position: relative;
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
-o-transition: transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
pointer-events: none;
}
.card .card-inner .card-face {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: auto;
}
.card .card-inner .card-face.card-back {
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .card-inner .card-face .card-face-inner .card-face-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 22px;
}
.card:hover .card-inner {
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .card-back {
background: steelblue;
}
<div class="card">
<div class="card-inner">
<img src="https://via.placeholder.com/400x500?text=%20" alt="" />
<div class="card-face card-front">
<div class="card-face-inner">
<div class="card-face-content">
Front
</div>
</div>
</div>
<div class="card-face card-back">
<div class="card-face-inner">
<div class="card-face-content">
<a href="#foo">Back</a>
</div>
</div>
</div>
</div>
</div>
原因是由于Chrome中的小精度误差,180度并非完全是半圈。
并且元素的左侧是under的正面(即使您看不到它,它仍然存在)。
将元素沿Z方向升高,仅一个像素,它就可以工作(现在完全在另一边):
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */
.card {
-webkit-perspective: 1000px;
perspective: 1000px;
display: inline-block;
}
.card .card-inner {
position: relative;
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
-o-transition: transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
}
.card .card-inner .card-face {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .card-inner .card-face.card-back {
transform: rotateY( 180deg) translateZ(1px); /* changed */
}
.card .card-inner .card-face .card-face-inner .card-face-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 22px;
}
.card:hover .card-inner {
-webkit-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card .card-back {
background: steelblue;
}
<div class="card">
<div class="card-inner">
<img src="https://via.placeholder.com/400x500?text=%20" alt="" />
<div class="card-face card-front">
<div class="card-face-inner">
<div class="card-face-content">
Front
</div>
</div>
</div>
<div class="card-face card-back">
<div class="card-face-inner">
<div class="card-face-content">
<a href="#foo">Back</a>
</div>
</div>
</div>
</div>
</div>