css3 图片翻转 | 易学教程

图片翻转效果主要由CSS3 动画效果执行，JS 只是控制类名变换

先来看看HTML：

这里两个都是块元素所以要注意正面和背面在一块肯定是固定在一块的，position:absolute;

CSS3动画

CSS代码

<style type="text/css">
    .in {
        -webkit-animation-timing-function: ease-out;
        -webkit-animation-duration: 350ms;
        animation-timing-function: ease-out;
        animation-duration: 350ms;
    }
    .out {
        -webkit-animation-timing-function: ease-in;
        -webkit-animation-duration: 225ms;
        animation-timing-function: ease-in;
        animation-duration: 225ms;
    }
    .flip {
        -webkit-backface-visibility: hidden;
        -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
        backface-visibility: hidden;
        transform: translateX(0);
    }
    /*背面*/
    .flip.out{
        -webkit-transform: rotateY(-90deg) scale(.9);
        -webkit-animation-name: flipouttoleft;/*执行动画*/
        -webkit-animation-duration: 175ms;
        transform: rotateY(-90deg) scale(.9);
        animation-name: flipouttoleft;
        animation-duration: 175ms;
    }
    /*正面*/
    .flip.in{
        -webkit-animation-name: flipintoright;/*执行动画*/
        -webkit-animation-duration: 225ms;
        animation-name: flipintoright;
        animation-duration: 225ms;
    }
/*定义动画*/
    @-webkit-keyframes flipouttoleft{
        from { -webkit-transform: rotateY(0); }
        to { -webkit-transform: rotateY(-90deg) scale(.9); }
    }
    @keyframes flipouttoleft {
        from { transform: rotateY(0); }
        to { transform: rotateY(-90deg) scale(.9); }
    }

    @-webkit-keyframes flipintoright{
        from { -webkit-transform: rotateY(90deg) scale(.9); }
        to { -webkit-transform: rotateY(0); }
    }
    @keyframes flipintoright{
        from { transform: rotateY(90deg) scale(.9); }
        to { transform: rotateY(0); }
    }
</style>

JS代码参考　　

<script type="text/javascript">
/*问题:
*  1.延时执行 没有； 快速移动到正面元素上，元素直接执行 影响效率；*/
    /*默认状态  翻转只有两面 正面和反面 可以固定*/
    var init_hover =function () {
        $(".left-time span:first-child").addClass('in').removeClass('out');
        $(".left-time span:last-child").addClass('out').removeClass('in');
    };
    init_hover()


    $(".left-time").bind("mouseenter", function() {

        var _this = $(this),spanIn =_this.find('span.in');
        init_hover();


        setTimeout(function() {
            spanIn.addClass("out").removeClass("in").siblings().addClass('in').removeClass('out');

        }, 225);

        return false;
    });
/*鼠标划出恢复到默认状态*/
    $(".left-time").bind("mouseleave",function () {
        init_hover();
    });



</script>

实例文件

链接: http://pan.baidu.com/s/1kVc1ao3 密码: 4ebp

参考资料：

http://www.zhangxinxu.com/study/201210/css3-animate-flip-example.html

来源：http://www.cnblogs.com/xxx91hx/p/5946500.html

标签

transform