Html CSS3面板旋转器仅允许在后面板的右侧进行链接

使用设置在网页上的前面板和后面板以段落形式显示信息，除了面板上有缩写标签或使用链接外，其他都可以正常工作，这些标签必须位于右侧才能工作（后面板），如果它们出现在左侧，则它们无法工作

面板似乎分为两半，链接将在正面左侧工作（必须快速，因为当您将鼠标悬停在前面时，它将开始旋转），这可以通过将鼠标光标悬停在后面板上的文本上看到，当您点击中间标记时，光标的样式将从箭头更改为大写字母I，这表示链接开始工作的位置，当用户更改页面的缩放时，会导致问题，因为文本会随着这些更改而略微调整自身，它会将一些链接移动到面板的死区，看不出链接为什么不能在整个面板上工作

p.S.现场正在施工中，但可在以下位置看到：

CSS代码：

/* positioning of panel2*/
#panel2 {
position:absolute;
top: 300px; left: 790px;
perspective: 1000;
-moz-perspective: 1000;
-webkit-perspective: 1000;
z-index: 35;
}

#panel2 p {
font-size: 14px;
padding: 10px;
}

#panel2 .front {
background: rgba(204,204,51,0.5);
border-radius: 30px;
top: 0; left: 0;
z-index: 30;
padding-bottom: 20px;
}

#panel2 .back {
background: rgba(46,227,240,0.5);
border-radius: 30px;
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
top: 0; left: 0;
padding-bottom: 20px;
}

/* sets the size of the spin panel2*/
#panel2 .spin-panel {
width: 500px; height: 920px;  
}

/* sets the rotation to occur on a hover over a panel*/
.spin-panel:hover .spinner {
transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}

/* the actual rotation*/
.spinner {
transition: all 1.9s linear;
transform-style: preserve-3d;
-moz-transition: all 1.9s linear;
-webkit-transition: all 1.9s linear;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position:relative;
}

/* sets the non facing side to be invisible */   
.front, .back {
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden; /* needs this as not supported in IE10*/
position: absolute;
top:0; left:0;
}

html5：

 <section id="panel2">
   <div class = "spin-panel">
    <div class = "spinner">
     <div class = "front">
      <article>
       <h4>About...</h4>
       <p>Mars is the fourth planet, etc......</p>
      </article>
     </div>
     <div class = "back">
      <article>
       <h4>Missions...</h4>
        <p>There have been over 40 missions to Mars in the past 50 years. 
         Most notable ones have been the recent landings of rover vehicles.
         <a href = "http://solarsystem.nasa.gov/missions/profile.cfm?        Sort=Target&Target=Mars&MCode=Pathfinder">
         Pathfinder</a> landed on the surface in 1997 releasing Sojourner
         the first wheeled robot to explore another planet.
      </p>
      <p>In 2004 the twin missions <a href = "http://solarsystem.nasa.gov/missions/profile.cfm?Sort=Target&Target=Mars&MCode=MER">
         Spirit and Opportunity</a> landed on the surface of Mars. <a href = "http://marsrover.nasa.gov/mission/status_spirit_2010.html">Spirit</a>
         explored years beyond its original 92 days mission.
         <a href = "http://marsrover.nasa.gov/mission/status_opportunityAll.html">Opportunity</a>
         is still working and has covered more than 38km as of October
         2013.
       </p>
      </article>
     </div>
    </div>
  </div>
 </section>

1997年降落在水面，释放了旅居者
第一个探索另一个星球的轮式机器人。

2004年，这两项任务在火星表面着陆。
在最初的92天任务之外探索了数年。
仍在工作，截至10月已行驶38公里以上
2013

保留了链接和后面板上的一些文本…希望有一个简单的解决方案，我们已经关注了好几天了…

好的

在靠近底部的页面右侧没有看到类似问题的链接，其快速修复方法是将旋转改为-180度，这已经起作用，面板现在可以在两侧使用，但仍不清楚为什么将变换设置为180度时它不起作用