図1.効果
表示画像の画像の任意のセット上にマウスホバーは、フリップ、表示テキストを描くときにマウスは、画面上にないとき
2.アイデア
4個の親divタグを設定し、それぞれの親のdiv層は、画像やテキストが含まれ、舞台テーブルdivタグは、4層の父親のdivタグが含まれています。
主な問題は、ここで問題プット画像ボックスとテキストボックスで、画像を表示するために始めている、フリップテキスト、我々は画像ボックスとテキストボックスがオーバーラップさせて、上の写真のボックスに次の層は、テキストボックス、どのように2枚の画像が一緒に重なって作るには？私たちは、絶対位置のための相対的な位置決め親のdivサブレイヤの写真とテキストボックスを設定し、垂直方向と水平方向の4つの方向の属性値の位置決めは、2つの重複のボックスを達成できるように、デフォルトで0に設定されていません。
次に、どのようにボックスに次の画像でそれを達成するには？2つの重複ボックスの後、私たちはテキストを達成するために、最初のポストでの書き込みテキストボックスを作成するために、親のdivレイヤピクチャボックス内ここで注意すべきフリップ機能を使用するテキストボックスは、それが絵を走った裏返しそして、次のボックス、次の文字の後に実現写真、フリップ関数ボックスを使用するには、上記の機能を実現するために、画像やテキストが含まれ、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color:#0D3462;
}
/*舞台*/
#piclist{
width:760px; /*170*4+10*8*/
height: 220px;/*190+边框*/
margin: 100px auto;
}
/*容器*/
.picbox{
float: left;
position: relative;
width: 170px;
height: 190px;
margin: 10px;
/*3d——双面效果*/
transform-style:preserve-3d;
transition:1.5s;
}
/*舞台鼠标悬停，就翻转，
正面背面互换*/
.picbox:hover{
transform:rotateY(180deg);
}
.face{
position: absolute;
width:170px;
height:190px;
}
.front{
border:2px solid #4b2518;
}
.back{
/*让它成为背面，开始只显示正面*/
transform:rotateY(180deg);
background-color: #4b2518;
border:2px solid #fff;
}
.back h3{
color:white;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
<div id="piclist">
<div class="picbox">
<div class="face front"><img src="images/1.jpg"></div>
<div class="face back"><h3>浓缩咖啡</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/2.jpg"></div>
<div class="face back"><h3>卡布奇诺</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/3.jpg"></div>
<div class="face back"><h3>拿铁</h3></div>
</div>
<div class="picbox">
<div class="face front"><img src="images/4.jpg"></div>
<div class="face back"><h3>摩卡</h3></div>
</div>
</div>
</div>
</body>
</html>divの中に親レイヤーは、最初の画像に書かれたテキストを、書きそうであれば、テキストは、また、上に絵になるだろうフリップを、使用したテキストに下げるが、テストした後、写真や画像フリップ上をホバリングところはありません、テキストが欠落しているが、それは、可能である下部フリップのテキストの解釈、そうならば、ここで特定の操作下の層は、その後、同じ親コンテナ内箱の裏表紙に書かれるだろうと推測していない場合箱の前面オフ、
