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...