I changed some syntax around in the Css and got it to work in firefox but now it wont work at all in safari
wht would it be working for on and not the other? (using webkit and moz for each browser)
.flip_container
{
width: 160px;
height: 125px;
position: absolute;
background-color:black;
}
#flipone
{
width: 160px;
height: 125px;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
-moz-transform-style: preserve-3d;
-moz-transition: -moz-transform 1s;
}
.front {
width: 100%;
height: 100%;
position: absolute;
background-image: url(../Images/effect_bg.png);
background-repeat:no-repeat;
background-position:-22px -20px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#backone {
width: 100%;
height: 100%;
position: absolute;
border: 1px solid white;
background-image: url(../Images/skate.jpg);
-webkit-transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(180deg);
-moz-backface-visibility: hidden;
}
.face{-webkit-transform: rotateY(180deg);}
#flipone:hover{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
