KaylaKaulitz
New Member
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). http://jsfiddle.net/TLCqu/2/The css is as follows:\[code\]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;}\[/code\]I added \[code\]-moz-transform: rotateY(-180deg);\[/code\] after \[code\]-webkit-transform:\[/code\] 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.