0

Using a front and back panel set up on a web page to display information in paragraphs, it all works fine except for when you have abbr. tags or use links on the panel, these must be on the right hand side to work (back panel), if they appear on the left side then they do not work.

The panel seems to be broken up into two halves, where links will work on the left on the front side (have to be quick as it will start to spin when you hover over the front), this is seen by hovering the mouse cursor over the text on the rear panel as you hit the halfway mark the style of cursor changes from an arrow to a sort of capital I, this signifies where the links start to work, it is causing problems when the user changes the zoom on the page as the text slightly adjusts itself with these changes and it moves some links to the dead section of the panel, can't see why links won't work across the whole panel....

P.S. site is under construction, but can be seen at: http://robtsani.com/our-solar-system/index.html

CSS code:

/* 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;
}

and the 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>

Left the links in and some text on the back panel...Hope there is a simple solution to this been staring at it for days...

4

1 回答 1

0

好的,

在靠近底部的页面右侧没有看到类似问题的链接,它的快速解决方法是将旋转更改为 -180 度,这已经奏效,面板现在可以在两侧使用,仍然虽然对于为什么它不能与设置为 180 度的变换一起工作感到困惑???

于 2013-10-31T02:30:33.973 回答