Html 在Chrome中进行css转换后，只能单击链接的右侧

这里有一个代码笔来说明

HTML

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

问题是，在Chrome中，只有a的右侧在转换后才可以单击

---

如何使整个黑色链接可点击

无法确切找到它不工作的原因，这可能是一个浏览器错误，但奇怪的行为是，如果我将

a.btn

的旋转角度从180度更改为200度（大于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);
}

---

不过对我来说很管用。。

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);
}