html - 我怎样才能更好地平滑这种悬停效果？

Question

当 .cell 缩放时，字母会跳跃。

如何为文本实现平滑的悬停效果？

html,
body,
.wrap {
  height: 100%;
}

body {
  background: #fff4fa;
}

.wrap {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;  
  flex-flow: row wrap;
  max-width: 33rem;
  width: 100%;
  margin: 0rem auto;
}

.cell__text {
    position: relative;
    z-index: 100;
    color: #ffffff;
    text-decoration: none;
    font-family: sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: center;
    font-size: .75rem;
}

.box:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17,17,17,.47);
}

.box {
  width: 10rem;
  height: 20rem;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: relative;
}

.cell {
  width: 10rem;
  height: 20rem;
  transform: rotate(120deg);
  overflow: hidden;
  position: relative;
  margin: -10.5rem .5rem 0;
  transition: all .27s ease-in-out;
   will-change: transform;
}

.box-xx {
    transform: rotate(-60deg);
    height: 100%;    
    width: 100%;
    overflow: hidden;
}
 
.box-x {
  transform: rotate(-60deg);
  height: 100%;
  width: 100%;
  
  background-size: cover;
  position: relative;
  transition: all .27s ease-in-out;
} 

.cell:hover { z-index: 100; transform: rotate(120deg) scale(1.2); }

.box-1 {
  background: url(https://images.unsplash.com/photo-1472211093208-3b31a17f3b12?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=252&q=80&cs=tinysrgb) center no-repeat;
}

.box-2 {
  background: url("https://images.unsplash.com/photo-1472141341085-dab5ea0df9a2?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=250&q=80&cs=tinysrgb") center no-repeat; 
}

.box-3 {
  background: url("https://images.unsplash.com/photo-1468679950062-7f9630082231?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=251&q=80&cs=tinysrgb") center no-repeat;
}

.box-4 {
  background: url("https://images.unsplash.com/photo-1468218620578-e8d78dcda7b1?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=251&q=80&cs=tinysrgb") center no-repeat;
}

.box-5 {
  background: url("https://images.unsplash.com/photo-1460400355256-e87506dcec4f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=376&h=251&q=80&cs=tinysrgb") center no-repeat;
}

<div class="wrap">
  
  <div class="cell">
    <div class="box-xx">
      <div class="box-x box-1">
        <div class="box">
          <a href="#" class="cell__text">Lorem ipsum dolor.</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="cell">
    <div class="box-xx">
      <div class="box-x box-2">
        <div class="box">
          <a href="#" class="cell__text">Lorem ipsum dolor.</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="cell">
    <div class="box-xx">
      <div class="box-x box-3">
        <div class="box">
          <a href="#" class="cell__text">Lorem ipsum dolor.</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="cell">
    <div class="box-xx">
      <div class="box-x box-4">
        <div class="box">
          <a href="#" class="cell__text">Lorem ipsum dolor.</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="cell">
    <div class="box-xx">
      <div class="box-x box-5">
        <div class="box">
          <a href="#" class="cell__text">Lorem ipsum dolor.</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

如果您在包含文本的元素上使用背面可见性，您的文本将不那么跳动。

-webkit-backface-visibility: hidden;
backface-visibility: hidden;