cssアニメーションスケールがクロムで動作しない

Question

/* html */ これはHTMLセクションです。

<div class="second-menu-2-container"> 
     <div class="second-menu-2"> 
      <a href="#">Home</a> 
      <a href="#">world</a> 
      <a href="#">Tech</a> 

     </div>  
    </div> 

/* css 3 */ これはCSS 3セクションです。私は<a>タグをいくつかのホバースケール変換を入れましたが、動作しません。

.second-menu-2-container { 
      background-color: #A91717; 
      width: 100%; 
     } 


.second-menu-2 { 
      width: 1000; 
      margin: 0 auto; 
      height: 30px; 

     } 
.second-menu-2 a { 
      transition: all 2s ease-in-out; 
      color: white; 
      text-decoration: none; 
      position: relative; 
      top: 8px; 
      padding: 0 10px; 
      border-right: 1px solid #E4E4E4; 
      font-weight: 100; 

     } 

    .second-menu-2 a:hover { 
      transform: scale(2); 

     } 

これはjsfiddleアドレスです：あなたはそれを動作させるように形質転換された要素にdisplay: block;かdisplay: inline-block;を持っている必要がありますhttps://jsfiddle.net/libaoming/xg692wy3/

Answer 1

。 https://jsfiddle.net/matikucharski/xg692wy3/3/