  |
|
|
 Un posto per mostrare altro contenuto. un Testo, un link, un immagine  L'origine ddi questa piccola ricerca è là :
 un Testo, un link, un immagine
|
ESEMPIO Css: copia codice: Head
#f1_container {
position: relative;
margin: 10px auto;
width: 192px;
height: 192px;
z-index: 1;
background: transparent;
border:1px solid #cccccc;
border-radius:30px;
}
#f1_container {
perspective: 500px;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
border-radius: 30px;
box-shadow: -5px 5px 5px #aaaaaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: #ffffff;
text-align: center;
background-color: #217285;opacity:0.9;
border-radius:30px;
}
ESEMPIO Css: copia codice Body
<div style="margin-right:10px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img src="gear.png"
/></div>
<div class="back face center">
<p><span style="font-size:14px;">Un posto
per mostrare altro contenuto.</span></p>
<p><span style="font-size:14px;">un Testo,
un link, un immagine</span></p>
</div>
</div>
</div>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img src="lightbulb.png"
/></div>
<div class="back face center">
<p><span style="font-size:14px;">L'origine
ddi questa piccola ricerca è là :</span></p>
<p><a href="http://www.pertegadacalcio.com"
target="_blank"><img alt="lightbulb.png"
src="lightbulb.png" style="border-width: 0px; border-style: solid;
width: 96px; height: 96px;"
/></a></p>
</div>
</div>
</div>
</div>
<div style="margin-right:10px; display: inline-block;">
<div id="f1_container">
<div id="f1_card">
<div class="front face"><img src="support.png"
/></div>
<div class="back face center">
<p><span style="font-size:14px;">un Testo,
un link, un immagine</span></p>
<p><a href="http://www.isolajava.com"
target="_blank"><img alt="support.png" src="support.png"
style="border-width: 0px; border-style: solid; width: 96px; height:
96px;" /></a></p>
</div>
</div>
</div>
</div>
|
|
