Vote count:
0
Hey everyone, I'm trying to get my .flip divs to flip through rotateY, but what I have isn't working and I'm not sure what I'm doing wrong. Would very much appreciate some help. Thanks.
JS:
$("#a1, #a2, #a3, #a4").hover(function(){
$(".flip").css("background-color","yellow");
$(".flip").css("transform":"(180deg)");
},function(){
$(".flip").css("background-color","#00FF00");
$(".flip").css("transform":"");
});
HTML:
<body>
<div id="tile_wrapper">
<div id="a1" class="tile a one">
<div class="frame">
<div class="flip"></div>
</div>
</div>
<div id="a2" class="tile a two">
<div class="frame">
<div class="flip"></div>
</div>
</div>
<div id="a3" class="tile a three">
<div class="frame">
<div class="flip"></div>
</div>
</div>
<div id="a4" class="tile a four">
<div class="frame">
<div class="flip"></div>
</div>
</div>
</div>
CSS:
html, body, .frame, .flip {
width: 50px;
height: 50px;
margin: 0;
}
#tile_wrapper {
width: 232px;
height: 50px;
}
.tile {
display: inline-block;
float: left;
height: 50px;
width: 50px;
padding: 4px;
}
.tile {
-webkit-perspective: 100px;
-moz-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.flip {
transition: background-color 0.6s ease-out;
background-color: #00FF00;
}
.frame {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
asked 1 min ago
Having trouble rotating div via css("transform":"(180deg)");
Aucun commentaire:
Enregistrer un commentaire