只有右手邊變換在Chrome

Question

這裏是爲了說明http://codepen.io/anon/pen/GynKp

的HTML

<section> 
    <a href="#" class="btn"><span>Text<br />Line Two</span></text> 
</section> 

CSS

section{ 
    width: 300px; 
    margin: 30px auto; 
    text-align: center; 
    border: 1px solid #ccc; 
} 

section a.btn{ 
    margin: 30px auto; 
    display: block; 
    background-image:url('http://dummyimage.com/200x100/000/fff.png&text=+'); 
    height: 100px; 
    width: 200px; 
    color: #fff; 
    line-height: 100px; 
    -webkit-transition: all 0.4s ease-out; 
    -moz-transition: all 0.4s ease-out; 
    -ms-transition: all 0.4s ease-out; 
    -o-transition: all 0.4s ease-out; 
    transition: all 0.4s ease-out; 
} 

section a.btn span{ 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal; 
    -webkit-transition: all 1s ease-out; 
    -moz-transition: all 1s ease-out; 
    -ms-transition: all 1s ease-out; 
    -o-transition: all 1s ease-out; 
    transition: all 1s ease-out; 
} 

section:hover a.btn{ 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 

/* This reverses the text back to LTR */ 
section:hover a.btn span{ 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
} 

的問題codepen是在Chrome只a的右側在變換後可點擊。

如何使整個黑色鏈接可點擊？

Answer 1

不能準確地發現它爲什麼不起作用，可能是一個瀏覽器錯誤，但奇怪的行爲是，如果我將a.btn的旋轉度從180更改爲200deg（大於198），可點擊部分更改爲左邊。 看起來像z平面移動，就像應用translateZ（40px）一樣，整個區域變得可點擊，例如，

section:hover a.btn{ 
    -webkit-transform: translateZ(40px) rotateY(180deg); 
    -moz-transform: translateZ(40px) rotateY(180deg); 
    -o-transform: translateZ(40px) rotateY(180deg); 
    transform: translateZ(40px) rotateY(180deg); 
}