CSS3面板旋轉器將只允許背面板右側的鏈接

使用設置在網頁上的前後面板以段落形式顯示信息，除了縮寫之外，它都可以正常工作。標籤或使用面板上的鏈接，它們必須在右側才能工作（背面板），如果它們出現在左側，則它們不起作用。CSS3面板旋轉器將只允許背面板右側的鏈接

面板似乎被分成兩部分，其中鏈接將在左側的正面工作（必須快速，因爲它會開始旋轉，當你懸停在前面），這是通過懸停鼠標光標位於後面板上的文本中，當您將光標的樣式從箭頭改變爲某種大寫字母I時，這表示鏈接開始工作的位置，當用戶更改縮放時導致問題在頁面上，隨着文本稍微調整自己與這些變化，它將一些鏈接移動到面板的死區，無法看到爲什麼鏈接不會在整個面板上工作....

PS網站正在建設中，但可以看出： http://robtsani.com/our-solar-system/index.html

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>

留在鏈接和後面板上的一些文字。 ..希望有一個簡單的解決方案，這已盯着它幾天...

來源

2013-10-31 Rob Fennell

好吧，

在靠近底部的頁面的右側沒有看到類似問題的鏈接，它的快速修復是將旋轉更改爲-180度，而此功能已運行，面板現在可用於兩側，仍然困惑，但爲什麼它不會與變換設置爲180度？

來源

2013-10-31 02:30:33

CSS3面板旋轉器將只允許背面板右側的鏈接

回答

相關問題