simplefrog
New Member
You will need Linux Chrome to see this. On my dev site spoilmebox.com (see three boxes on bottom), my backface is showing through. How do I fix this?CSS...\[code\].Qcontainer {position: relative;-webkit-perspective: 800;-moz-perspective: 800;perspective: 800;background: none;}.pumpkinhead {width:100%;height:15em;-webkit-transform-style: preserve-3d;-webkit-transition: 1s;-moz-transform-style: preserve-3d;-moz-transition: 1s;transform-style: preserve-3d;transition: 1s;}.Qcontainer:hover .pumpkinhead {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);}.face {position: absolute;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;z-index: 5;}.back {width: 66%;height:127%;-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);transform: rotateY(180deg);background: #000000;background: -webkit-linear-gradient(top,rgba(0,0,0,0.65)0%,rgba(0,0,0,0)100%);z-index: 4;padding: 15%;}\[/code\]html...\[code\]<div class="row-fluid"> <div class="span4 Qcontainer"> <div class="pumpkinhead"> <div class="face front"> <h2 class="g2-unit-header">...</h2> <p style="min-height: 240px;">...</p> <p><a href="http://stackoverflow.com/questions/15539322/#" class="btn btn-info">...</a></p> </div> <div class="face back"> <p>this is my back fool!</p> </div> </div> </div></div>\[/code\]Notice I am using bootstrap (span4) but I don't believe this is messing up because it is working in Chrome (Windows) and Firefox.The source for this code was Responsive Web Design with HTML5 and CSS3 by Ben FrainI am already using jQuery and JavaScript on this site, so not looking for an alternative. I want to support this new CSS3 technology if I can get it to play with most of the browsers.