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翻牌效果

评论(0)Web开发网
阅读(137)喜欢(0)不喜欢(0)HTML/CSS兼容/XML