js css3 3d翻牌效果
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=" utf-8">
<title>css3 3d翻牌效果</title>
<style>
* {margin:0;padding:0;list-style-type:none;}
.warperMain01_2 {height:auto;background: #eff1f0;font-family:"微软雅黑";overflow:hidden; margin:0 !important; padding:5em 0;}
.warperMain01_2 h1{font-size: 42px;letter-spacing: 0.05em; text-align:center;line-height:1.1;font-weight:normal;}
@keyframes flipOutYtest {
from {transform: perspective(1300px);}
40% {transform: perspective(1300px) rotate3d(0, 1, 0, 60deg);opacity: 1;}
50% {transform: perspective(1300px) rotate3d(0, 1, 0, 90deg);opacity: 0;}
to {transform: perspective(1300px) rotate3d(0, 1, 0, 180deg);opacity: 0;}
}
@-o-keyframes flipOutYtest {
from {-o-transform: perspective(1300px);}
40% {-o-transform: perspective(1300px) rotate3d(0, 1, 0, 60deg);opacity: 1;}
50% {-o-transform: perspective(1300px) rotate3d(0, 1, 0, 90deg);opacity: 0;}
to {-o-transform: perspective(1300px) rotate3d(0, 1, 0, 180deg);opacity: 0;}
}
@-webkit-keyframes flipOutYtest {
from {-webkit-transform: perspective(1300px);}
40% {-webkit-transform: perspective(1300px) rotate3d(0, 1, 0, 60deg);opacity: 1;}
50% {-webkit-transform: perspective(1300px) rotate3d(0, 1, 0, 90deg);opacity: 0;}
to {-webkit-transform: perspective(1300px) rotate3d(0, 1, 0, 180deg);opacity: 0;}
}
@-moz-keyframes flipOutYtest {
from {-moz-transform: perspective(1300px);transform: perspective(1300px);}
40% {-moz-transform: perspective(1300px) rotate3d(0, 1, 0, 60deg);opacity: 1;}
50% {-moz-transform: perspective(1300px) rotate3d(0, 1, 0, 90deg);opacity: 0;}
to {-moz-transform: perspective(1300px) rotate3d(0, 1, 0, 180deg);opacity: 0;}
}
@keyframes flipInYtest {
from {transform: perspective(1300px) rotate3d(0, 1, 0, -180deg);opacity: 0;}
50% {transform: perspective(1300px) rotate3d(0, 1, 0, -90deg);opacity: 0;}
60% {transform: perspective(1300px) rotate3d(0, 1, 0, -60deg);opacity: 1;}
to {transform: perspective(1400px);opacity: 1;}
}
@-o-keyframes flipInYtest {
from {-o-transform: perspective(1300px) rotate3d(0, 1, 0, -180deg);opacity: 0;}
50% {-o-transform: perspective(1300px) rotate3d(0, 1, 0, -90deg);opacity: 0;}
60% {-o-transform: perspective(1300px) rotate3d(0, 1, 0, -60deg);opacity: 1;}
to {-o-transform: perspective(1300px);opacity: 1;}
}
@-webkit-keyframes flipInYtest {
from {-webkit-transform: perspective(1300px) rotate3d(0, 1, 0, -180deg);opacity: 0;}
50% {-webkit-transform: perspective(1300px) rotate3d(0, 1, 0, -90deg);opacity: 0;}
60% {-webkit-transform: perspective(1300px) rotate3d(0, 1, 0, -60deg);opacity: 1;}
to {-webkit-transform: perspective(1400px);opacity: 1;}
}
@-moz-keyframes flipInYtest {
from {-moz-transform: perspective(1300px) rotate3d(0, 1, 0, -180deg);opacity: 0;}
50% {-moz-transform: perspective(1300px) rotate3d(0, 1, 0, -90deg);opacity: 0;}
60% {-moz-transform: perspective(1300px) rotate3d(0, 1, 0, -60deg);opacity: 1;}
to {-moz-transform: perspective(1400px);opacity: 1;}
}
.app1{-webkit-animation: flipOutYtest 0.75s linear;
-o-animation: flipOutYtest 0.75s linear;
-moz-animation:flipOutYtest 0.75s linear;
animation: flipOutYtest 0.75s linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;font-family:"微软雅黑";}
.app2{-webkit-animation: flipInYtest 0.75s linear;-o-animation:flipInYtest 0.75s linear;animation: flipInYtest 0.75s linear;-webkit-animation-fill-mode: both;animation-fill-mode: both;font-family:"微软雅黑";}
.well{ width: 1300px; min-height: 280px;margin:5em auto 0 auto; height: auto;}
.well .well-item{ position: relative; float: left; width: 250px; min-height: 280px;margin-left:10px;font-family:"微软雅黑";}
.well .well-item .correct img{width: 100%;min-height: 280px;}
.correct{position: absolute;width: 100%; background-color:#eff1f0;}
.opposite{min-height: 280px;width: 100%;}
.opposite div{height: 280px;width: 100%;}
.opposite-content{display: table;width: 100%;min-height: 280px;background-color: #4a9d70;}
.opposite-content-text{ display: table-cell; vertical-align: middle; text-align: left; color: white; font-size: 14px; padding:0 20px}
.opposite-content-text img {width:44px; height:44px; top:20px;left:103px;position:absolute;}
.opposite-content-text h4{font-size: 16px; text-align:center; color:#fff; font-weight:normal;}
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
</head>
<body>
<section class="container warperMain01_2">
<h1>jquery_hover图片转动显示</h1>
<div class="well">
<div class="well-item" style="margin-left:0;">
<div class="correct"><img class="app2" src="/imgblog/20170428/1812333466.png"></div>
<div class="opposite">
<div class="app1">
<div class="opposite-content">
<div class="opposite-content-text">
<img class="small" src="/imgblog/20170428/1812426750.png">
<h4>我是工程师</h4>
<p>随时随地，打开手机，接收告警，查看事件信息，浏览报表，查询机器数据。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$(function () {
$(".well-item").hover(function () {
$(this).find(".correct").children().removeClass().addClass("app1");
$(this).find(".opposite").children().removeClass().addClass('app2');
}, function () {
$(this).find(".correct").children().removeClass().addClass("app2");
$(this).find(".opposite").children().removeClass().addClass('app1');
});
});
</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：js css3 3d翻牌效果