I wonder how to use this flip plugin to make 3d rollover transition patible with IE9 (clients request). I can make it work but I have two pngs and I want on mouse hover to switch from rollover1.png to rollover2.png. So far it does rollover1.png
<!DOCTYPE html>
<html>
<style type="text/css">
.flipbox {
width: 108px;
height: 108px;
line-height: 108px;
background-color: #ff9000;
font-family: 'ChunkFive Regular', Tahoma, Helvetica;
font-size: 2.5em;
color: #ffffff;
text-align: center;
}
</style>
<script src=".7.1/jquery.min.js" type="text/javascript"></script>
<script src=".7.2/jquery-ui.min.js"></script>
<script src="jquery.flip.min.js"></script>
<body>
<div class="flipbox">
<img src="rollover1.png" alt="Unlock Your Potential"/>
<img src="rollover2.png" alt="jjjj"/>
</div>
<div class="flipPad">
<a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">
</a>
</div>
</body>
<script>
$(function(){
$('.flipbox').hover(function(){
$('.flipbox').flip({
direction:'tb'
});
});
});
</script>
</html>
I wonder how to use this flip plugin to make 3d rollover transition patible with IE9 (clients request). I can make it work but I have two pngs and I want on mouse hover to switch from rollover1.png to rollover2.png. So far it does rollover1.png
<!DOCTYPE html>
<html>
<style type="text/css">
.flipbox {
width: 108px;
height: 108px;
line-height: 108px;
background-color: #ff9000;
font-family: 'ChunkFive Regular', Tahoma, Helvetica;
font-size: 2.5em;
color: #ffffff;
text-align: center;
}
</style>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script src="jquery.flip.min.js"></script>
<body>
<div class="flipbox">
<img src="rollover1.png" alt="Unlock Your Potential"/>
<img src="rollover2.png" alt="jjjj"/>
</div>
<div class="flipPad">
<a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">
</a>
</div>
</body>
<script>
$(function(){
$('.flipbox').hover(function(){
$('.flipbox').flip({
direction:'tb'
});
});
});
</script>
</html>
1 Answer
Reset to default 2Following sites have good demo for how to implement flip effect on hover:
http://line25./wp-content/uploads/2010/webkit-flip/demo/index.html
http://blog.mgechev./2013/05/04/css3-flipping-effect/
HTML:
<div class="panel">
<div class="front card">
</div>
<div class="back card">
</div>
</div>
CSS:
.panel {
width: 300px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.front {
z-index: 2;
background-image: url(http://img.afreecodec./images/v3/wp-content/uploads/2011/05/00_chrome_icon.jpg);
}
.back {
z-index: 1;
-webkit-transform: rotateX(-180deg);
-ms-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
transform: rotateX(-180deg);
background-image: url(http://www.digitaltrends./wp-content/uploads/2011/03/ie-9-icon.jpg);
}
.panel:hover .front {
z-index: 1;
-webkit-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.panel:hover .back {
z-index: 2;
-webkit-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
JSFiddle Example: http://jsfiddle/mgechev/GpK25/16/
Using JS:
http://jsfiddle/mornaistar/eHfUa/
http://jsfiddle/azizpunjani/JfUbW/
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745423671a4627078.html
评论列表（0条）