css transform:malfunction:
i'm having problem transform not working expected, , can't seem see why.
it should flip 1 image another. when hover on test it, image show me half of picture. rotate other side, staying in half view. tried tinkering sizes, got no result.
can @ code (below) , see fix i'm not seeing (what did wrong, missing?)
<div class="flip_container">
<div id="flipone">
<div class="front"></div>
<div id="backone"></div>
</div>
</div>
.flip_container
{
width: 160px;
height: 125px;
position: relative;
}
#flipone
{
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
}
.front {
width: 100%;
height: 100%;
position: absolute;
background-image: url(../images/skate.jpg);
-webkit-backface-visibility: hidden;
border: 1px solid white;
}
#backone {
width: 100%;
height: 100%;
position: absolute;
background-image: url(../images/effect_bg.png);
-webkit-transform: rotatey(180deg);
-webkit-backface-visibility: hidden;
}
#flipone:hover{
-webkit-transform: rotatey(180deg);
}
i changed syntax around in css , got work in firefox wont work @ in safari
wht working on , not other? (using webkit , moz 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);
}
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment