barakooda2
New Member
Trying to get a flip effect like the first box shown here http://css3playground.com/flip-card.phpAlthough atm all i get is the following which when hovered over just flashes a type of shadow
This is the code im using...HTML:\[code\]<div id="f1_container"><div id="f1_card" class="shadow"> <div class="front face"> <img src="http://stackoverflow.com/questions/15729670/images/eventbox.png"/> </div> <div class="back face center"> <p>This is nice for exposing more information about an image.</p> <p>Any content can go here.</p> </div></div></div>\[/code\]And the CSS:\[code\]#f1_container { position: relative; margin: 10px auto; width: 350px; height: 250px; z-index: 1;}#f1_container { perspective: 1000;}#f1_card { width: 100%; height: 100%; transform-style: preserve-3d; transition: all 1.0s linear;}#f1_container:hover #f1_card { transform: rotateY(180deg); box-shadow: -5px 5px 5px #aaa;}.face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}.face.back { display: block; transform: rotateY(180deg); box-sizing: border-box; padding: 10px; color: white; text-align: center; background-color: #aaa;}\[/code\]Any help would be great.