CSS Transform hover not consistent in chrome - css

Question

I'm trying to make a menu with css3 rotations. Here is an example.
http://jsfiddle.net/5Bg7P/
When a person hovers the square rotates 90 degrees around the x-axis, then when a user clicks it, it rotates an additional 5 degrees to 95 degrees. In chrome, sometimes after it rotates, and i click on it, it goes back to 0 degrees as if the mouse left the item even though it didn't. It happens more often if you let the menu item finish spinning and then only click on it.
Any advice would be appreciated.
#menu .menuItem {
position: relative;
float: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, -50px);
transform: translate3d(0, 0, -50px);
-webkit-transition: .5s;
transition: .5s;
width: 120px;
height: 50px;
opacity: .6;
cursor: pointer;
}
#menu .menuItem:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
margin-top: 1px;
}
#menu .menuItem:active {
-webkit-transform: rotateX(95deg);
transform: rotateX(95deg);
margin-top: 1px;
}
#menu .menuItem div {
position: absolute;
width: 120px;
height: 50px;
border: 1px solid #f2f2f2;
background: #848488;
}
#menu .menuItem .front,
#menu .menuItem .bottom {
text-align: center;
height: 50px;
line-height: 50px;
color: #f2f2f2;
letter-spacing: 1px;
font-size: 18px;
}
#menu .menuItem .front {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
#menu .menuItem .back {
-webkit-transform: translate3d(0, 0, -25px);
transform: translate3d(0, 0, -25px);
/* box-shadow: 0px 0px 40px 7px #b9c9d0; */
}
#menu .menuItem .top {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 25px);
transform: rotateX(90deg) translate3d(0, 0, 25px);
}
#menu .menuItem .bottom {
-webkit-transform: rotateX(-90deg) translate3d(0, 0, 25px);
transform: rotateX(-90deg) translate3d(0, 0, 25px);
}
#menu .menuItem .right {
-webkit-transform: rotateY(90deg) translate3d(0, 0, 50px);
transform: rotateY(90deg) translate3d(0, 0, 50px);
height: 50px;
width: 50px;
left: 25px;
}
#menu .menuItem .left {
-webkit-transform: rotateY(-90deg) translate3d(0, 0, 50px);
transform: rotateY(-90deg) translate3d(0, 0, 50px);
height: 50px;
width: 50px;
left: 25px;
}

Answer 1

I think that's a problem about the hover state being activated in the base element or the child element.
I have changed a little bit how the hover and the transforms work, and now it works ok (or at least it works ok in my tests)
CSS
#menu {
position: relative;
z-index: 1;
float: left;
font-family: helvetica;
}
#menu .menuItem {
position: relative;
float: left;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: .5s;
transition: .5s;
width: 120px;
height: 50px;
opacity: .6;
cursor: pointer;
}
#menu .menuItem:active {
-webkit-transform: rotateX(5deg);
transform: rotateX(5deg);
margin-top: 1px;
}
#menu .menuItem div {
position: absolute;
width: 120px;
height: 50px;
border: 1px solid #f2f2f2;
background: #848488;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
font-size: 18px;
margin-top: 1px;
transition: .5s;
}
#menu .menuItem .front {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
#menu .menuItem .bottom {
-webkit-transform: rotateX(-90deg) translate3d(0, 0, 25px);
transform: rotateX(-90deg) translate3d(0, 0, 25px);
}
#menu .menuItem:hover .front {
-webkit-transform: rotateX(90deg) translate3d(0, 0, 25px);
transform: rotateX(90deg) translate3d(0, 0, 25px);
}
#menu .menuItem:hover .bottom {
-webkit-transform: translate3d(0, 0, 25px);
transform: translate3d(0, 0, 25px);
}
fiddle
updated fiddle
The transtion between
transform: rotateX(90deg) translate3d(0, 0, 25px);
and
transform: translate3d(0, 0, 25px);
is not a perfect rotation, but the interpolation between the 2 movements.
To get a pure rotation, the other state must have matching properties:
transform: rotateX(0deg) translate3d(0, 0, 25px);