Images FLIP 1


Un posto per mostrare altro contenuto.

un Testo, un link, un immagine

L'origine ddi questa piccola ricerca l :

lightbulb.png

un Testo, un link, un immagine

support.png


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>

.. Scarica lo Zip - Oppure Salva la pagina:



♣ All Rights Reserved - www.isolajava.com ♣