transform not working as expected

[sadunaresh]

on my way learning css3 I came across this:

I am using following css to make div rotate along y-axis on hove and un-hover…. It works sometimes but sometimes it blinks in middle of transformation…

div.trans
{

height: 70px;
width: 70px;
-moz-transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transition: all 400ms ease-out 0s;
-webkit-transition: all 400ms ease-out 0s;
background: none repeat scroll 0 0 transparent;
border-radius: 2px 2px 2px 2px;

}
div.trans:hover{
background-color:#28A3CC;
-moz-transform:rotateY(0deg);

-webkit-transform:rotateY(0deg);

}

am I doing anything wrong?

[sadunaresh]

my apologies for not formatting the css correctly.. here it is ..

div.trans
{
height: 70px;
width: 70px;
-moz-transform: rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transition: all 400ms ease-out 0s;
-webkit-transition: all 400ms ease-out 0s;
background: none repeat scroll 0 0 transparent;
border-radius: 2px 2px 2px 2px;
}

div.trans:hover{
background-color:#28A3CC;
-moz-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);

}

[Author]

Posts