如何更好地平滑这种悬停效果？

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;