I am trying to make a card flip and show its backside. It works in all other browsers but not in Internet Explorer 11.
I've tried adding -ms- prefaces, but that didn't help. The problem seems to be that IE does not support the css attribute transform-style: preserve-3d.
Here is a jsfiddle: https://jsfiddle.net/gbkq94hr/
HTML
<body>
<article>
<div id="card0" class="card">
<figure class="front">
</figure>
<figure class="back">
</figure>
</div>
</article>
</body>
JS
$(document).ready(function () {
var flipped = false;
var card = $("#card0");
card.click(function() { flipFunction();});
function flipFunction() {
if (flipped) {
flipped = false;
card.removeClass('flip');
} else {
card.addClass('flip');
flipped = true;
}
};
});
CSS
html {
height: 100%;
}
.flip {
transform: rotateY(180deg);
}
.card {
float:left;
width: 110px;
height: 139px;
cursor: pointer;
transform-style: preserve-3d;
transition: transform 1s;
position: relative;
}
figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-ms-backface-visibility:hidden;
}
.back {
background-color: blue;
transform: rotateY(-180deg);
}
.front {
z-index: 2;
background-color: red;
transform:rotateY(0deg);
}
article {
height: 114px;
width: 114px;
perspective: 1000;
}
EDIT:
As suggested in the comments, I tried following David Walshes instructions, but still couldn't get it to work. https://jsfiddle.net/w9o2chmn/2/
Hi I changed the jQuery code to perform card flip on click. Kindly check https://jsfiddle.net/w9o2chmn/6/
HTML
I added class flip-container to article tag
<article class="flip-container">
<div id="card0" class="card">
<figure class="front">
front
</figure>
<figure class="back">
back
</figure>
</div>
</article>
CSS
I have removed the CSS :hover code and placed it in jQuery click
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
color:#fff;
}
/* UPDATED! flip the pane when hovered */
/*.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}*/
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.card {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
background:red;
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
background:blue;
}
/*
jQuery
$(document).ready(function() {
var flipped=false;
$('.flip-container').on('click', function(){
if(!flipped){
$('.back').css('transform','rotateY(0deg)');
$('.front').css('transform','rotateY(180deg)');
flipped=true;
console.log('true part :'+flipped);
}
else{
$('.back').css('transform','rotateY(180deg)');
$('.front').css('transform','rotateY(0deg)');
flipped=false;
console.log('else part :'+flipped);
}
});
});
Kindly let me know if its working for you...
PS: I tested this on IE11 and its working for me
Not sure why the second animation is delaying so long as I have used this method in my own code exactly the same. Maybe someone can clean this up.
Basically wanting to add a slight delay to change the z-index so it appears, as the animation is on it's edge (50% through animation), the z-index changes and allows it to have the correct card on top.
$(document).ready(function() {
$('.flip-container').on('click', function(){
if(!$(".front").hasClass("front_flip")) {
$(".front").delay(200).queue(function(){
$(this).addClass("flip_z_index").dequeue();
});
$('.front').addClass('front_flip');
$('.back').removeClass('back_flip');
} else {
$(".front").delay(200).queue(function(){
$(this).removeClass("flip_z_index").dequeue();
});
$('.front').removeClass('front_flip');
$('.back').addClass('back_flip');
}
});
});
.flip-container {
perspective: 1000;
color:#fff;
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
.card {
transform-style: preserve-3d;
}
.front, .back {
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 3;
background:red;
}
.back {
z-index:2;
background:blue;
}
.front_flip {
transform: rotateY(-180deg);
}
.back_flip {
transform: rotateY(180deg);
}
.flip_z_index {
z-index:1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="flip-container">
<div id="card0" class="card">
<div class="front">
front
</div>
<div class="back back_flip">
back
</div>
</div>
</article>
Related
I am trying to build an animation where each time a card is clicked the card flips over and reveals the opposite side. The words on each side of the card will change every time the card is flipped. The problem I am having is that the front face of my card only is visible on sporadic occasions. I cannot find any logic to why the front face is normally not visible but occasionally will be visible.
This is my jsfiddle: https://jsfiddle.net/tdammon/ucf6mx1q/
Here is the HTML structure:
<body>
<section>
<div id="headerSection">
<h1>Heard At Prime</h1>
</div>
<div id='whiteBlock'>
<div id='front'>hey</div>
<div id='back'>hi</div>
</div>
</section>
</body>
</html>
Here is the flipping logic for the #whiteBlock div:
$(document).ready(onReady);
function onReady(){
$('#whiteBlock').on('click', flipIt)
}
quotesArray=['hey','cool saying','funny thing','hahaha'];
function flipIt() {
console.log('flip')
$('#front').empty();
$('#back').empty();
let firstQuote= quotesArray[Math.floor(Math.random()*quotesArray.length)]
let secondQuote= quotesArray[Math.floor(Math.random()*quotesArray.length)]
$('#front').append(firstQuote);
$('#back').append(secondQuote);
$('#whiteBlock').toggleClass('flip');
};
And the CSS animations:
body {
background-color: blue;
}
section{
perspective: 500px;
}
#whiteBlock{
background-color:white;
height: 100px;
width:100px;
transform: scale(1);
transform-style: preserve-3d;
/* transition: transform .5s; */
display: flex;
justify-content: center;
align-items: center;
/* position: absolute;
animation: move 3s linear infinite; */
}
#whiteBlock:active{
transform:scale(.97);
transition: transform .2s
}
#whiteBlock.flip{
transform:rotateY(180deg)
}
#front{
transform: rotateY(180deg);
backface-visibility: hidden;
}
#back{
position:absolute;
backface-visibility: hidden;
}
backface-visibility still requires vendor prefixes. So you'll need -webkit-backface-visibility for Chrome and Safari and -moz for Firefox.
With a couple changes this more of less works for me in Safari and should be a good starting point:
$(document).ready(onReady);
function onReady() {
$('#whiteBlock').on('click', flipIt)
}
let quotesArray = ['hey', 'cool saying', 'funny thing', 'hahaha'];
function flipIt() {
console.log('flip')
$('#front').empty();
$('#back').empty();
let firstQuote = quotesArray[Math.floor(Math.random() * quotesArray.length)]
let secondQuote = quotesArray[Math.floor(Math.random() * quotesArray.length)]
$('#front').append(firstQuote);
$('#back').append(secondQuote);
$('#whiteBlock').toggleClass('flip');
};
section {
perspective: 500px;
}
#whiteBlock {
border: 1px solid #333;
height: 100px;
width: 100px;
transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
position: relative;
}
#whiteBlock.flip {
transform: rotateY(180deg)
}
#front {
transform: rotateY(0deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#back {
transform: rotateY(180deg);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div id="headerSection">
<h1>Heard At Prime</h1>
</div>
<div id='whiteBlock'>
<div id='front'>hey</div>
<div id='back'>hi</div>
</div>
</section>
my challenge is that I have two rows of boxes that I want to flip independently. Can't use hover as that is too chaotic, visually, for some users. So I have a JQuery script that toggles between classes, BUT, when applied to multiple boxes I get all of the boxes turning at once. I'd like to be able to turn over only the one clicked on like the hover effect. I can get that to happen if I give each box a separate class but that is a lot of extra CSS and I know that there has to be a better, cleaner way. Please help. :)
Here is the jquery code: $('.card') is what I'd like to use instead of ('cardOne', '.cardTwo', etc.)
function flip() {
$('.card').toggleClass('flipped');
}
And here is the CSS (it's too cumbersome):
.container {
width: 200px;
height: 200px;
position: relative;
border: 1px solid #ccc;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.cardOne, .cardTwo, .cardThree, .cardFour, .cardFive, .cardSix, .cardSeven, .cardEight {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
}
.cardOne div {
display: block;
height: 100%;
width: 100%;
/*line-height: 200px;*/
color: #000;
text-align: center;
/*font-weight: bold;*/
font-size: 18px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.cardOne .front, .cardTwo .front, .cardThree .front, .cardFour .front, .cardFive .front, .cardSix .front, .cardSeven .front, .cardEight .front {
background: #9ddae5;
line-height: 180px;
}
.cardOne .back, .cardTwo .back, .cardThree .back, .cardFour .back, .cardFive .back, .cardSix .back, .cardSeven .back, .cardEight .back {
background: blue;
line-height: 18px;
-webkit-transform: rotateX( -180deg );
-moz-transform: rotateX( -180deg );
-o-transform: rotateX( -180deg );
transform: rotateX( -180deg );
}
.cardOne.flipped, .cardTwo.flipped, .cardThree.flipped, .cardFour.flipped, .cardFive.flipped, .cardSix.flipped, .cardSeven.flipped, .cardEight.flipped {
-webkit-transform: rotateX( -180deg );
-moz-transform: rotateX( -180deg );
-o-transform: rotateX( -180deg );
transform: rotateX( -180deg );
}
And then, of course, the HTML (but I'll cut it to two boxes):
<div class="container">
<div class="cardOne" onclick="flipOne()">
<div class="front">
<!-- front content -->
<p>anxiety</p>
</div>
<div class="back">
<!-- back content -->
<p>Occasional anxiety is a normal part of life. You might feel anxious when faced with a problem at work, before taking a test, or making an important decision. But anxiety disorders involve more than temporary worry or fear. </p>
</div>
</div><!-- end flipper -->
</div>
</div> <!-- end col-1 -->
<div class="col-1">
<div class="container">
<div class="cardTwo" onclick="flipTwo()">
<div class="front">
<!-- front content -->
<p>infertility</p>
</div>
<div class="back">
<!-- back content -->
<p>Grief is a real part of infertility. It may be heightened in miscarriages or stillbirths, but it is just as real when a couple cannot conceive.</p>
</div>
</div>
</div>
</div><!-- end col-1 -->
Use the following:
$('.container').on('click', '.card', function(){
$(this).toggleClass('flipped');
});
Using this logic, we bind with the script an event handler to the parent container of the cards. Any time a card is clicked, it will toggle the flipped class on the card that was clicked.
$('.container').on('click', '.card', function() {
$(this).toggleClass('flipped');
});
.card {
display: inline-block;
min-width: 100px;
min-height: 80px;
border: 1px solid black;
}
.card.flipped { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="card"></div>
<div class="card"></div>
</div>
Try this:
$('.card').on('click', function() {
$(this).toggleClass('flipped');
}
And you'll only need one class .card reducing writng and so on.
Ps: remove the function declation and replaced it with the code above and remove all onclick="flip()" from your HTML.
I have a couple of cards in a deck with a background-image with that of the deck, that when clicked, they do a flip animation and then change the background-image to the front-faced equivalent.
Each of these cards are a div.
My problem is, when the card is turned around after being clicked, the front-faced background image is also reversed. Any idea how I can solve this?
Here is the fiddle: https://jsfiddle.net/667nxfze/
Here is my HTML of one card:
<div id='pack_cont' data-deckimage="url('/image/decks/deck1.png')">
<div class='card init' data-image="url('/image/card/card1.png')"></div>
</div>
Here is the Javascript that reacts to it:
var card = $(this);
card.toggleClass('open');
setTimeout(function(){
card.toggleClass('opened');
},300);
if(card.hasClass('open')){
//Show that card image
card.css('background-image', card.data('image'));
}else{
//Show the Deck Image
card.css('background-image', card.parent().data('deckimage'));
}
Here are the CSS classes:
.card{
width: 147px;
height: 280px;
border-radius: 18px;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
/*all transition to take 1s */
transition:all 1s;
-ms-transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
/*make card non selectable*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*while opening a card, again shift transform origin
to vertical and horizontal center axis
to give an actual flip effect
*/
.card.open{
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card.opened{
background-image: none;
}
It is better to keep a flipper(container) with front and back face and flip it over on click.
$(document).ready(function() {
$('.card-container .front').each(function() {
$(this).css('background-image', $(this).parents('.card-container').data('deckimage'));
});
$('.card-container .back').each(function() {
$(this).css('background-image', $(this).parents('.card-container').data('image'));
});
});
$('.card-container').click(function() {
var card = $(this);
card.toggleClass('open');
});
.card-container {
perspective: 1000px;
}
.card-container.open .flipper {
transform: rotateY(180deg);
}
.card-container, .front, .back {
width: 320px;
height: 480px;
background-size: contain;
background-repeat: no-repeat;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div class="card-container" data-deckimage="url('https://s-media-cache-ak0.pinimg.com/736x/eb/fb/03/ebfb03607fc73fa6a74de5ed3559b272--card-companies-card-deck.jpg')" data-image="url('https://a.fsdn.com/con/app/proj/vector-cards/screenshots/Jack_of_Spades.png')" >
<div class="flipper">
<div class="front">
</div>
<div class="back">
</div>
</div>
</div>
You can actually use another timeout of 300 milliseconds for the transition effect, like this :
$(document).ready(function() {
$('.card').each(function() {
$(this).css('background-image', $(this).parent().data('deckimage'));
});
});
$('.card').click(function() {
var card = $(this);
card.toggleClass('open');
setTimeout(function() {
card.toggleClass('opened');
}, 300);
if (card.hasClass('open')) {
//Show that card image
setTimeout (
function() {
card.css('background-image', card.data('image')); }
, 300)
} else {
//Show the Deck Image
setTimeout (
function() { card.css('background-image', card.parent().data('deckimage')); }
, 300)
}
});
.card {
width: 147px;
height: 280px;
border-radius: 18px;
position: absolute;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
text-align: center;
/*all transition to take 1s */
transition: all 1s;
-ms-transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
/*make card non selectable*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*while opening a card, again shift transform origin
to vertical and horizontal center axis
to give an actual flip effect
*/
.card.open {
-webkit-transform: rotateY( 180deg) scaleX(-1);;
transform: rotateY( 180deg) scaleX(-1);;
}
}
.card.opened {
background-image: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='pack_cont' data-deckimage="url('https://s-media-cache-ak0.pinimg.com/736x/eb/fb/03/ebfb03607fc73fa6a74de5ed3559b272--card-companies-card-deck.jpg')">
<div class='card init' data-image="url('https://a.fsdn.com/con/app/proj/vector-cards/screenshots/Jack_of_Spades.png')"></div>
</div>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
i am suggesting that you use layers
<!DOCTYPE html>
<html>
<head>
<style>
img1 {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
img2 {
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img1 src="/image/decks/deck1.png">
<img2 src="/image/decks/card1.png">
</body>
</html>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a page flipper animation for a notebook styled divs:
http://jsfiddle.net/jdell64/c1ytu8mo/2/
$('#next').click(function () {
$('#card').toggleClass('flipped');
})
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
background: rgba(255, 255, 255, 0.7);
top: 125px;
/* backface-visibility: hidden; */
transition: transform 1s, visibility 0.9s;
transform-origin: 50% 0%;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="card">
<div class="back">Back</div>
<div id="mid" class="mid">Middle</div>
<div id="front" class="front">Front</div>
</div>
</section>
<br/>
<br/>
<br/>
<br/>
<a id="back" href="#">back</a>
<a id="next" href="#">next</a>
The 'next' button seems to work, but it toggles the page back and forth. How would I get it to go 'next' in an endless loop, and have the previous page do the same?
Also, as an aside... I am not sure why my 'front' content has to be at the bottom.
More info
Based off of this article, I can do this:
$('#next').click(function () {
myBox = $('#card')
myBox.toggleClass('flipped');
myBox.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
function (e) {
console.log('done!');
console.log(e);
// code to execute after transition ends
});
})
but it fires twice for some reason.
Update I got the 'next' button to work, but I can't figure out the back button:
http://jsfiddle.net/jdell64/u3aebu1L/5/
You simply toggle the flipped class, adding / removing would create a forth and back notion, but if you want to flip more elements, then the flipped class should stay on the card, but instead should go to the sub elements.
To answer your aside: z-index will solve reordering issues... otherwise the sub elements will simply be put over each other, thus the last one being on top.
$('#next').click(function () {
$('#card').addClass('flipped');
});
$('#back').click(function () {
$('#card').removeClass('flipped');
});
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
background: rgba(255, 255, 255, 0.7);
top: 125px;
/* backface-visibility: hidden; */
transition: transform 1s, visibility 0.9s;
transform-origin: 50% 0%;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
#card .front {
z-index: 2;
}
#card .mid {
z-index: 1;
}
#card div {
z-index: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div id="card">
<div id="front" class="front">Front</div>
<div id="mid" class="mid">Middle</div>
<div class="back">Back</div>
</div>
</section>
<br/>
<br/>
<br/>
<br/>
<a id="back" href="#">back</a>
<a id="next" href="#">next</a>
You should also switch the front class to the next page so the animation will always be the same because off that 'front' class
This is future you... I found a hacky solution:
http://jsfiddle.net/jdell64/u3aebu1L/
Basically, I added a .middle class to be for the other direction animation. I also added a noAnimate class to ignore animations.
.container {
background: lightgray;
width: 500px;
height:500px;
margin: 0 auto;
perspective: 800px;
}
#card {
width: 50%;
height: 100%;
margin: 0 auto;
transform-style: preserve-3d;
}
#card > div {
position:absolute;
width:100%;
height: 50%;
//background: rgba(255, 255, 255, 0.6);
top: 125px;
transform-origin: 50% 0%;
}
#card .front {
transition: transform 1s, visibility 0.9s;
}
#card .middle {
transition: visibility 0.1s, transform 1s;
}
#card.flipped .front {
transform: rotateX(360deg);
transform-origin: 50% 0%;
visibility: hidden;
}
#card.flopped .middle {
transform: rotateX(-360deg);
transform-origin: 50% 0%;
}
.noAnimate {
-moz-transition-property: none !important;
-webkit-transition-property: none !important;
-o-transition-property: none !important;
transition-property: none !important;
}
.front {
background: lightgreen;
}
.middle {
background: lightblue;
}
.back {
background: goldenrod;
}
Hi i need to make flipping cards effect in different browsers but it correctly works only in chrome and opera...in different browsers it doesn't change image or change image but doesn't flipp... can you help me?? this is my CSS code:
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 400px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
textarea {
resize: none;
}
and this is my Html code:
<div id="sekcia">
<a href="http://<?echo $_SERVER['SERVER_NAME'];?>/sk/hudba"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="http://<?echo $_SERVER['SERVER_NAME'];?>/images/titulna/hudba.png"><!-- front content -->
</div>
<div class="back">
<img src="http://<?echo $_SERVER['SERVER_NAME'];?>/images/titulna/hudba1.png"><!-- back content -->
</div>
</div>
</div></a>
</div>
One thing I have different than your code is:
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}