Rotate logo 360 degree through y-axis - html

Question

i was testing out a logo rotation on the y-axis and i came with the following:
http://jsfiddle.net/MEmnc/
.container {
width: 62px;
height: 91px;
position: relative;
perspective: 400px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
transform: rotateY( 180deg );
}
#card .flipped {
transform: rotateY( 180deg );
}
For some reason i can't get it to work.
I want this logo to rotate when hovered over it. I used an existing logo but this is purely for testing purposes. It needs to rotate as in http://www.ultranoir.com/en/#!/home/
Also will this work for all browsers or is it better to use jquery?

Answer 1

You can do that without problems with CSS.
However, you have several things going wrong.
The correct CSS is :
.container {
width: 62px;
height: 91px;
position: relative;
perspective: 400px;
margin: 0px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
transition: -webkit-transform 1s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
margin: 0px;
}
.container:hover #card {
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card .flipped {
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
updated demo
EDITED
There were some problems in the above demo; also I noticed in your video that you wanted an animation and not a transform.
DEMO with animation (webkit)

Answer 2

I didn't saw any rotation on the link you provided.. But my intuition says Try this
HTML
<section class="container">
<div id="card">
<img src='http://www.ultranoir.com/cdn/gene/image/common/logo/logo_un2_neg.png' alt='Title of image'/>
</div>
</section>
CSS
.container {
width: 62px;
height: 91px;
position: relative;
perspective: 400px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#card figure {
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#card img:hover {
transform: rotateY(360deg);
-webkit-transform: rotateY(180deg);
transition-duration: 1.5s;
-webkit-transition-duration:1s;
}
I have not changed other classes you made..

Answer 3

I fixed vals answer, by changing the img position to absolute and adding some transform to translate Z axis and removing the backface disabler
img {
position: absolute;
}
img.front {
z-index: 100;
transform: translatez(1px);
}
please see here http://jsfiddle.net/56cy0s4w/