只有右手边变换在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); 
}