I am trying to make a div flip in the horizontal plane using css and JQuery. I found some code on JSFiddle that does this very neatly, but I can't understand why it does not work on Firefox, but works on Chrome and Safari (I've only tested it on OSX at the moment).
The css is as follows:
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatey(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
I added -moz-transform: rotateY(-180deg);
after -webkit-transform:
anywhere this was used. This has the strange effect of making the text reverse, but not the div. I'm not sure what works in webkit or what I should be changing.
For mozilla, you need to use -moz-
. Here is an updated version of your CSS:
body {
background: #ccc;
}
.flip {
-webkit-perspective: 800;
-moz-perspective: 800;
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
}
.flip .card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
-moz-transform-style: preserve-3d;
-moz-transition: 0.5s;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
z-index: 2;
font-family: Georgia;
font-size: 3em;
text-align: center;
line-height: 200px;
}
.flip .card .front {
position: absolute;
z-index: 1;
background: black;
color: white;
cursor: pointer;
}
.flip .card .back {
-webkit-transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
background: blue;
background: white;
color: black;
cursor: pointer;
}
DEMO: http://jsfiddle.net/TLCqu/3/
Hope this helps!