このホバー効果をよりスムーズにする方法を教えてください。

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;