编辑
我想我找到了解决方法：不要使用scale()！
.c-flip-card .c-flip-card__inner {
transition: all 0.8s;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) translate3d(40px,-40px,0);
/* Just change the width and height to 140% and have them transition
I used translate3d to position the card the same way scale() does */
width: 140%;
height: 140%;
}
如果您想获得与 scale() 产生的相同定位，您可以将 translate3d(40px,-40px,0) 之类的内容添加到您的转换中。
这样就不用管理文字的大小，效果一样（除了文字位置有一点过渡），也没有模糊。
.c-flip-card {
margin: 50px;
background-color: transparent;
width: 180px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.c-flip-card:hover {
z-index: 10;
position: relative;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) translate3d(40px,-40px,0);
width: 140%;
height: 140%;
}
.c-flip-card .c-flip-card__inner {
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: all 0.8s;
transform-style: preserve-3d;
}
.c-flip-card .c-flip-card__front,
.c-flip-card .c-flip-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.c-flip-card .c-flip-card__front {
background-color: #bbb;
color: black;
}
.c-flip-card .c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg);
}
<div class="c-flip-card">
<div class="c-flip-card__inner">
<div class="c-flip-card__front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="c-flip-card__back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
原创
将背面卡片的内容放入div 并在其上应用scale(0.7) 似乎可行，但在第一次悬停时看起来确实不太好。
<div class="c-flip-card__back">
<div class="notScale">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
.c-flip-card:hover .notScale {
transform: scale(0.7);
}
因此，与其对文本应用变换，因为它只在悬停时显示，为什么不简单地使用 calc() 和变量来更改字体大小：
/* define variables for p and h1 */
body {
--sizeP : 16px;
--sizeH1 : calc(2.5 * var(--sizeP));
}
/* apply those variable one "regular" h1 and p */
h1 {
font-size: var(--sizeH1);
}
p{
font-size: var(--sizeP);
}
/* "scale" down the text for the backside by a factor of .7 */
.c-flip-card .c-flip-card__back h1{
font-size: calc(.7 * var(--sizeH1));
}
.c-flip-card .c-flip-card__back p{
font-size: calc(.7 * var(--sizeP));
}
对于模糊的部分，我确实通过添加：
.c-flip-card {
-webkit-filter: blur(0);
filter: blur(0);
}
body {
--sizeP: 16px;
--sizeH1: calc(2.5 * var(--sizeP));
}
h1 {
font-size: var(--sizeH1);
}
p {
font-size: var(--sizeP);
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.c-flip-card {
margin: 50px;
background-color: transparent;
width: 180px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
/* Do an horizontal flip when you move the mouse over the flip box container */
/* This container is needed to position the front and back side */
/* Position the front and back side */
/* Style the front side (fallback if image is missing) */
/* Style the back side */
-webkit-filter: blur(0);
filter: blur(0);
}
.c-flip-card:hover {
z-index: 10;
position: relative;
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) scale(1.39);
}
.c-flip-card .c-flip-card__inner {
cursor: pointer;
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.c-flip-card .c-flip-card__front,
.c-flip-card .c-flip-card__back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.c-flip-card .c-flip-card__front {
background-color: #bbb;
color: black;
}
.c-flip-card .c-flip-card__back {
background-color: red;
color: white;
transform: rotateY(180deg);
}
.c-flip-card .c-flip-card__back h1 {
font-size: calc(.7 * var(--sizeH1));
}
.c-flip-card .c-flip-card__back p {
font-size: calc(.7 * var(--sizeP));
}
<div class="c-flip-card">
<div class="c-flip-card__inner">
<div class="c-flip-card__front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="c-flip-card__back">
<h1>John Doe</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
对于 chrome，我尝试了 here 和 here 的所有解决方案，但无法获得下降结果。
唯一适用于 chrome 模糊部分的是：
@supports (zoom : 140%) {
.c-flip-card:hover {
zoom : 140%;
transform: translate3d(-40px,-40px,0);
}
.c-flip-card:hover .c-flip-card__inner {
transform: rotateY(180deg) scale(1);
}
.c-flip-card .c-flip-card__back h1{
font-size: calc(var(--sizeH1));
}
.c-flip-card .c-flip-card__back p{
font-size: calc(var(--sizeP));
}
}
但我无法转换属性zoom，所以效果不是很好。