CSS 缩放和变换使文本模糊

Question

我有一些翻转卡片，当你将鼠标悬停在翻转卡片上时，卡片会翻转并放大（缩放）。但是，我不想缩放悬停卡内的文本，所以我将文本放在 child div 内。（我只希望 parent 卡片背景缩放）。

如何阻止我的文本和内容缩放和变得模糊？我试图将我的 child div 重置为比例大小的 1/2 以重置它，但它不起作用。

HTML

<div class="c-flip-card">
  <div class="c-flip-card__inner">
    <div class="c-flip-card__front"><img src="img_avatar.png" alt="Avatar"</div>
     <div class="c-flip-card__back">
        <h1>John Doe</h1> 
        <p>Architect & Engineer</p> 
        <p>We love that guy</p>
     </div>
   </div>
</div>

SASS

.c-flip-card {
    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 */
    &:hover {
        z-index: 10;
        position: relative;
    }
    &:hover .c-flip-card__inner {
        transform: rotateY(180deg) scale(1.4);
    }
    /* This container is needed to position the front and back side */
    .c-flip-card__inner {
        cursor:pointer;
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }
    /* Position the front and back side */
    .c-flip-card__front, .c-flip-card__back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }
    /* Style the front side (fallback if image is missing) */
    .c-flip-card__front {
        background-color: #bbb;
        color: black;
    }
    /* Style the back side */
    .c-flip-card__back {
        background-color: red;
        color: white;
        transform: rotateY(180deg);
    }
    .abc{
        transform: scale(0.7);
        h1, p{
            color:#000;
        }
    }
}

jsfiddle

Answer 1

编辑

我想我找到了一个解决方法：不要使用 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));
}

对于模糊的部分，我通过添加 :

得到了一些改进（尽管对于 chrome 来说还不够）

.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 and 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 所以效果不是很好。

Answer 2

我遵循了 Amarjits 的解决方案并将 scale:1.1 添加到 .c-flip-card__back，这是最好的结果，但是使用 Saffari

会很模糊

.c-flip-card__back {
    background-color: red;
    color: white;
    transform: rotateY(180deg) scale(1.1);
}

Answer 3

我找到了更好的解决方案。只是不要在后卡上使用缩放，所以动画只是在前卡淡出时补间，它只显示后卡

这种大约一半的过渡会产生缩放的错觉，而实际上它只是在设置的高度和宽度处显示 div。

在 Chrome 和 Saffari 中有效，文本不模糊

.mycont{
    /* How pronounced should the 3D effects be */
    perspective: 500;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    width:100%;
    height:245px;
    position:relative;
    /*Some UI */
    border-radius:6px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    -ms-border-radius:6px;
    -o-border-radius:6px;
    font-size:28px;
    line-height:150px;
    vertical-align:middle;
    cursor:pointer;
}

.box-front,.box-back{
   /* Enable 3D transforms */
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
   backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
   width:100%;
  height:100%;
  position:absolute;
  background-color:#0090d9;
   /* Animate the transitions */
  -webkit-transition:0.8s; text-align:center;
  -moz-transition:0.8s; text-align:center;
  -ms-transition:0.8s; text-align:center;
  -o-transition:0.8s; text-align:center;
  transition:0.8s; text-align:center;
  color:#FFF;
  border-radius:5px;
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  -ms-border-radius:6px;
  -o-border-radius:6px;
  }

.box-back{
   /* The back side is flipped 180 deg by default */
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  background-color:#f35958;
  }

.mycont:hover .box-front{
  /* When the mycont is hovered, flip the front side and hide it .. */
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  }

.mycont:hover .box-back{
  /* .. at the same time flip the back side into visibility */
  transform:rotateY(360deg);
  -webkit-transform:rotateY(360deg);
  -moz-transform:rotateY(360deg);
  -ms-transform:rotateY(360deg);
  -o-transform:rotateY(360deg);
        margin-left: -0%; 
        margin-top: -10%;
        width: 300px;
        height:430px;
}

<div style="width:300px; margin-top:100px; margin-left:100px;">
  <div class="mycont">
      <div class="box-front">Front :)</div>
      <div class="box-back">
          rtrtrtrt
      </div>   
  </div>
</div>

CSS 缩放和变换使文本模糊

CSS scale and transform making text blury

html

css

css-transitions