3D翻牌效果

作者: stone_yao | 来源:发表于2016-09-13 21:32 被阅读102次

3D翻牌效果
CSS3动画3D
简单的自动翻牌效果
css数字翻牌动画效果
css3翻牌效果
css实现简单的3D效果
CSS 效果
android卡片的翻牌、翻转效果
HTML+CSS 制作翻牌效果[练习]
ViewPager切换动画

<html>
<head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery-2.1.0.min.js"></script>
    <style type="text/css">
        .outer{
            width: 235px;
            height: 280px;
            border: 1px red solid;
            margin: 0 auto;

        }
        .outer a{
            width:235px;
            height:2800px;
            position: absolute;
            /*transform-style: preserve-3d;*/
            backface-visibility:hidden;
            -webkit-backface-visibility: hidden;
            transition:all 2s;
            display: block;

        }
        .div1{
            background: url("1.png") no-repeat;
            transform:rotateY(-180deg);
        }
        .div2{
            background: url("2.png") no-repeat;
            transform:rotateY(-180deg);
        }
        .div1.active{
            transform:rotateY(0deg);
        }
        .div2.active{
            transform:rotateY(0deg);
        }
/*        .outer:hover .div1{
            transform:rotateY(-180deg);
        }
        .outer:hover .div2{
            transform:rotateY(0deg);
        }*/
    </style>
</head>

<body>
<div class="outer">
    <a class="div1 active" href="www.qq.com"></a>
    <a class="div2" href="www.baidu.com" ></a>
</div>
</body>
<script type="text/javascript">
  $('.outer').hover(function(){
    $('.div1').removeClass('active');
    $('.div2').addClass('active');
    
  },function(){
    $('.div2').removeClass('active');
    $('.div1').addClass('active');
  });
</script>
</html>

css效果和query效果都可以正常使用

但是要注意的是，在使用jquery方式的时候，不要把hover 的事件加在旋转的物体上，否则会一直触发 hover 的进入和跳出事件。