Ciao, non so se sia un problema di css o javascript quindi nel caso spostate la discussione dove ritenete pi� opportuno.
Ho fatto delle flip card seguendo degli esempi che ho trovato. In chrome funziona perfettamente mentre in firefox c'� un bug che non riesco a risolvere:
Quando clicco su una flip card il content del front (un h2) si vede anche nel back ma al rovescio mentre in chrome non succede.
La cosa strana � che ho ricreato la flip card su codepen in firefox ma funziona bene. In pratica succede solo sul mio file in locale. Di seguito il codice:
HTML
codice:
<div class="flipper">
<div class="card">
<div class="front transformParameter">
<div class="overlay">
<h2>Lorem Ipsum</h2>
</div>
</div>
<div class="back transformParameter">
<h3>Lorem Ispum</h3>
<p>Lorem Ipsum</p>
<p class="date"><span class="glyphicon glyphicon-calendar"></span>Lorem</p>
</div>
</div>
</div>
CSS
codice:
.flipper {
width: 33.33%;
min-width: 250px;
height: 250px;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.front, .back {
width: 100%;
height: 100%;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
// first child perch� ne ho diversi di flip card ma per brevit� ne metto uno qui
.work .flipper:first-child .front {
background-image: url("image_part_001.jpg");
background-size: 100% 100%;
}
.work .flipper:first-child .back {background-color: rgba(170, 57, 57, 1);}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .4);
}
.front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 25px;
}
.work .front h2 {
color: ghostwhite;
text-align: center;
font-size: 2rem;
position: absolute;
top: 45%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.work .back h3 {
color: ghostwhite;
margin: 0;
font-size: 1.6rem;
margin-bottom: 15px;
text-align: center;
}
.work .back .date {
color: ghostwhite;
font-size: 1rem;
position: absolute;
bottom: 0px;
}
.work .back p {
color: ghostwhite;
font-size: 1.2rem;
}
JAVASCRIPT
codice:
$(function(){
$(".flipper").on("click", function(){
$(this).find(".transformParameter").css({
"-webkit-transition": "-webkit-transform 1.2s",
"-moz-transition": "-moz-transform 1.2s",
"-o-transition": "-o-transform 1.2s",
"transition": "transform 1.2s"
})
$(this).find(".front").css({
"-webkit-transform": "rotateY(180deg)",
"transform": "rotateY(180deg)"
})
$(this).find(".back").css({
"-webkit-transform": "rotateY(0deg)",
"transform": "rotateY(0deg)"
})
})
$(".flipper").on("mouseleave", function(){
$(this).find(".transformParameter").css({
"-webkit-transition": "-webkit-transform 1.2s",
"-moz-transition": "-moz-transform 1.2s",
"-o-transition": "-o-transform 1.2s",
"transition": "transform 1.2s"
})
$(this).find(".front").css({
"-webkit-transform": "rotateY(0deg)",
"transform": "rotateY(0deg)"
})
$(this).find(".back").css({
"-webkit-transform": "rotateY(180deg)",
"transform": "rotateY(180deg)"
})
})
})
E' da ieri che cerco di capire il perch� ma ancora non ho capito.. all'inizio pensavo fosse dovuto al mancato vendor -moz in alcune propriet� (backface-visibility, transform-style, perspective) ma ho visto che dalla versione 16 di mozilla questo non � pi� richiesto.
Ho pensato potesse essere dovuto alla propriet� z-index: 2 della classe .front e in effetti se nel javascript la reimposto a 0, il bug sparisce (nel senso che l'h2 non si vede pi� nel back) ma lo fa solo quando il back � perfettamente girato quindi per tutta la rotazione rimane e l'effetto � brutto..
Invoco il vostro aiuto.