CSS 3d perspective off
===

i'm trying to get a hang off the 3d transform functions in css. My code at this point is pretty much copied straight from a tutorial because no matter how hard i try i just cant seem to get it working properly. the link to how it's supposed to look is: http://desandro.github.com/3dtransforms/examples/card-01.html

and my code is:

    <html>
    	<head>
    		<style media="screen">
    	
    			.container  {
    				width: 200px;
    				height: 260px;
    				position: relative;
    				-webkit-perspective: 800;
    				}
    			#card {
    				width: 100%;
    				height: 100%;
    				position: absolute;
    				-webkit-transform-style: preserve-3D;
    				-webkit-transition: -webkit-transform 2s;
    				}
    			#card figure  {
    				display: block;
    				position: absolute;
    				width: 100%;
    				height: 100%;
    				-webkit-backface-visibility: hidden;
    				}
    			#card .face1  {
    				background: red;
    				}
    			#card .face2  {
    				background: blue;
    				-webkit-transform: rotateY(180deg);
    				}
    			#card:hover  {
    				-webkit-transform: rotateY(180deg);
    				}
    		</style>
    	</head>
    	<body>
    		<section class="container">
    			<div id="card">
    				<figure class="face1">1</figure>
    				<figure class="face2">2</figure>
    			</div>
    		</section>
    	</body>
    </html>

like i said its pretty much word for word from the tutorial, only thing i changed was using hover instead of a button. Thanks for any help.