Flipping Tiles over CSS3 with Background - html

Question

I am trying to create a flip over effect where the content of the div changes, though not able to figure out why the text disappears after a few seconds.
I have added backface-visibility:hidden though no use!
HTML
<div class="tweets">
<div class="front">
This is the front
</div>
<div class="back">
Back this is
</div>
</div>
CSS
.tweets{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 2s;
-webkit-transition: transform 2s;
transition-delay:0s;
-webkit-transition-delay:0s;
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
background-size:cover;
}
.tweets.flipped{
transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
background-size:cover;
}
.back{
transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
Can anyone help ?

Answer 1

I think this is what you are looking for, i have created square block of 220px(change as per your requirement), which has image you linked in question as background.
JSFiddle
CSS
.flip-container {
position:relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
.flip-container:hover .flipper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform:rotateY(180deg);
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
filter: FlipH;
-moz-filter: FlipH;
-ms-filter:"FlipH";
}
.flip-container, .front, .back {
width: 220px;
height: 220px;
}
.flipper {
-webkit-transition: 0.8s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.8s;
-ms-transform-style: preserve-3d;
-moz-transition: 0.8s;
-moz-transform-style: preserve-3d;
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg') no-repeat;
background-size:100% 100%;
color:red;
}
.front:hover {
transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
}
.back {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: FlipH;
}
.front-title {
font-size:20px;
text-align:center;
}
.back-title {
font-size:25px;
text-align:center;
}
HTML
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="front-title">I am front Text</div>
</div>
<div class="back">
<div class="back-title">I am text behind </div>
</div>
</div>
</div>