深入理解transform属性之翻转效果

DEMO下载：http://download.csdn.net/detail/cometwo/9459617

纯CSS3实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />

        <title></title>
        <style>
            a {
                display: block;
                float: left;
                margin: 10px 50px 10px 50px;
                color: red;
                border: 1px solid blue;
            }

            .a {
                transition: All 1s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .a:hover {
                transform: rotate(360deg);
            }

            .b {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .b:hover {
                transform: scale(1.2);
            }

            .c {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .c:hover {
                transform: rotate(360deg) scale(1.2);
            }

            .d {
                transition: All 0.4s ease-in-out;
                width: 200px;
                height: 200px;
                background-color: #000000;
                display: block;
                text-align: center;
                line-height: 200px;
                font-size: 20px;
                font-weight: bold;
            }

            .d:hover {
                transform: translate(0, -10px);
            }
            /*****************************************/

            .flip-container {
                perspective: 1000;
                clear: both;
                border: 1px solid red;
                margin-top: 50px;
                margin-left: 50px;
            }

            .flip-container:hover .flipper {
                transform: rotateY(-180deg);
            }

            .flip-container,
            .front,
            .back {
                width: 200px;
                height: 200px;
            }

            .flipper {
                transition: 2s;
                transform-style: preserve-3d;
                position: relative;
            }

            .front,
            .back {
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }

            img {
                width: 200px;
                height: 200px;
                overflow: hidden;
            }

            .front {
                background: red;
                z-index: 2;
            }

            .back {
                background: blue;
                transform: rotateY(-180deg);
            }
            /***********************************/

            .flip-container1 {
                perspective: 1000;
                border: 1px solid red;
                margin-top: 50px;
                margin-left: 50px;
            }

            .flip-container1:hover .flipper1 {
                transform: rotateX(-180deg);
            }

            .flip-container1,
            .front1,
            .back1 {
                width: 200px;
                height: 200px;
            }

            .flipper1 {
                transition: 2s;
                transform-style: preserve-3d;
                position: relative;
                transform-origin: 100% 100px;
                /* 高的一半 */
            }

            .front1,
            .back1 {
                backface-visibility: hidden;
                position: absolute;
                top: 0;
                left: 0;
            }

            img {
                width: 200px;
                height: 200px;
                overflow: hidden;
            }

            .front1 {
                background: red;
                z-index: 2;
            }

            .back1 {
                background: blue;
                transform: rotateX(-180deg);
            }
        </style>

    </head>

    <body>

        <a class="a">360度旋转</a>
        <a class="b">悬浮放大效果</a>
        <a class="c">旋转放大</a>
        <a class="d">上下移动</a>
        <h1 style="clear: both;">垂直翻转</h1>
        <div class="flip-container">
            <div class="flipper">
                <div class="front">
                    <img src="img/1.jpg" />
                </div>
                <div class="back">
                    <img src="img/2.jpg" />
                </div>
            </div>
        </div>

        <h1>水平翻转</h1>
        <div class="flip-container1">
            <div class="flipper1">
                <div class="front1">
                    <img src="img/1.jpg" />
                </div>
                <div class="back1">
                    <img src="img/2.jpg" />
                </div>
            </div>
        </div>
    </body>

</html>

JS实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-2.1.0.min.js"></script>
        <title>CSS3 翻转效果 </title>
        <link rel="stylesheet" href="css/fanzhuan.css" type="text/css" />
        <style>
            #box {
                width: 355px;
                height: 500px;
                margin: 30px auto;
                position: relative;
                border: 1px solid red;
            }

            .list {
                position: absolute;
            }

            .list img {
                border-radius: 2px;
            }
        </style>
        <script>
            $(function() {
                // 在前面显示的元素，隐藏在后面的元素
                var eleBack = null,
                    eleFront = null,
                    // 纸牌元素们
                    eleList = $(".list");
                // 确定前面与后面元素
                var funBackOrFront = function() {
                    eleList.each(function() {
                        if ($(this).hasClass("out")) {
                            eleBack = $(this);
                        } else {
                            eleFront = $(this);
                        }
                    });
                };
                funBackOrFront();
                $("#box").hover(function() {
                    // 切换的顺序如下
                    // 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
                    // 2. 结束后，之前显示在后面的元素逆向90度翻转显示在前
                    // 3. 完成翻面效果
                    eleFront.addClass("out").removeClass("in");
                    setTimeout(function() {
                        eleBack.addClass("in").removeClass("out");
                        // 重新确定正反元素
                        funBackOrFront();
                    }, 225);
                    return false;
                });
            })
        </script>
    </head>

    <body>
<h1>必须给要翻转的添加flip类</h1>
        <div id="box">
            <span class="list flip out"><img src="img/puke-back.png" alt="纸牌正面" /></span>
            <span class="list flip"><img src="img/puke-k.png" alt="纸牌背面" /> </span>
        </div>

    </body>

</html>

需要fanzhuan.css支持

/*
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
.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;
}
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.fade.out {
    opacity: 0;
    -webkit-animation-duration: 125ms;
    -webkit-animation-name: fadeout;
    animation-duration: 125ms;
    animation-name: fadeout;
}
.fade.in {
    opacity: 1;
    -webkit-animation-duration: 225ms;
    -webkit-animation-name: fadein;
    animation-duration: 225ms;
    animation-name: fadein;
}
.pop {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.pop.in {
    -webkit-transform: scale(1);
    -webkit-animation-name: popin;
    -webkit-animation-duration: 350ms;
    transform: scale(1);
    animation-name: popin;
    animation-duration: 350ms;
    opacity: 1;
}
.pop.out {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;
    opacity: 0;
}
.pop.in.reverse {
    -webkit-animation-name: fadein;
    animation-name: fadein;
}
.pop.out.reverse {
    -webkit-transform: scale(.8);
    -webkit-animation-name: popout;
    transform: scale(.8);
    animation-name: popout;
}
@-webkit-keyframes popin {
    from {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@keyframes popin {
    from {
        transform: scale(.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes popout {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    to {
        -webkit-transform: scale(.8);
        opacity: 0;
    }
}
@keyframes popout {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(.8);
        opacity: 0;
    }
}
/* keyframes for slidein from sides */
@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translate3d(100%,0,0); }
    to { -webkit-transform: translate3d(0,0,0); }
}
@keyframes slideinfromright {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translate3d(-100%,0,0); }
    to { -webkit-transform: translate3d(0,0,0); }
}
@keyframes slideinfromleft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
/* keyframes for slideout to sides */
@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translate3d(0,0,0); }
    to { -webkit-transform: translate3d(-100%,0,0); }
}
@keyframes slideouttoleft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translate3d(0,0,0); }
    to { -webkit-transform: translate3d(100%,0,0); }
}
@keyframes slideouttoright {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}
.slide.out, .slide.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    animation-timing-function: ease-out;
    animation-duration: 350ms;
}
.slide.out {
    -webkit-transform: translate3d(-100%,0,0);
    -webkit-animation-name: slideouttoleft;
    transform: translateX(-100%);
    animation-name: slideouttoleft;
}
.slide.in {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-name: slideinfromright;
    transform: translateX(0);
    animation-name: slideinfromright;
}
.slide.out.reverse {
    -webkit-transform: translate3d(100%,0,0);
    -webkit-animation-name: slideouttoright;
    transform: translateX(100%);
    animation-name: slideouttoright;
}
.slide.in.reverse {
    -webkit-transform: translate3d(0,0,0);
    -webkit-animation-name: slideinfromleft;
    transform: translateX(0);
    animation-name: slideinfromleft;
}
.slidefade.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -webkit-animation-duration: 225ms;
    transform: translateX(-100%);
    animation-name: slideouttoleft;
    animation-duration: 225ms;
}
.slidefade.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 200ms;
    transform: translateX(0);
    animation-name: fadein;
    animation-duration: 200ms;
}
.slidefade.out.reverse {
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
    -webkit-animation-duration: 200ms;
    transform: translateX(100%);
    animation-name: slideouttoright;
    animation-duration: 200ms;
}
.slidefade.in.reverse {
    -webkit-transform: translateX(0);
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 200ms;
    transform: translateX(0);
    animation-name: fadein;
    animation-duration: 200ms;
}
/* slide down */
.slidedown.out {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;
}
.slidedown.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfromtop;
    -webkit-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfromtop;
    animation-duration: 250ms;
}
.slidedown.in.reverse {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 150ms;
    animation-name: fadein;
    animation-duration: 150ms;
}
.slidedown.out.reverse {
    -webkit-transform: translateY(-100%);
    -webkit-animation-name: slideouttotop;
    -webkit-animation-duration: 200ms;
    transform: translateY(-100%);
    animation-name: slideouttotop;
    animation-duration: 200ms;
}
@-webkit-keyframes slideinfromtop {
    from { -webkit-transform: translateY(-100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideinfromtop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@-webkit-keyframes slideouttotop {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(-100%); }
}
@keyframes slideouttotop {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}
/* slide up */
.slideup.out {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: 100ms;
    animation-name: fadeout;
    animation-duration: 100ms;
}
.slideup.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfrombottom;
    -webkit-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfrombottom;
    animation-duration: 250ms;
}
.slideup.in.reverse {
    -webkit-animation-name: fadein;
    -webkit-animation-duration: 150ms;
    animation-name: fadein;
    animation-duration: 150ms;
}
.slideup.out.reverse {
    -webkit-transform: translateY(100%);
    -webkit-animation-name: slideouttobottom;
    -webkit-animation-duration: 200ms;
    transform: translateY(100%);
    animation-name: slideouttobottom;
    animation-duration: 200ms;
}
@-webkit-keyframes slideinfrombottom {
    from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@keyframes slideinfrombottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
    from { -webkit-transform: translateY(0); }
    to { -webkit-transform: translateY(100%); }
}
@keyframes slideouttobottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.viewport-flip {
    -webkit-perspective: 1000;
    perspective: 1000;
    position: absolute;
}
.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;
}
.flip.out.reverse {
    -webkit-transform: rotateY(90deg) scale(.9);
    -webkit-animation-name: flipouttoright;
    transform: rotateY(90deg) scale(.9);
    animation-name: flipouttoright;
}
.flip.in.reverse {
    -webkit-animation-name: flipintoleft;
    animation-name: flipintoleft;
}
@-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 flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@-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); }
}
/* The properties in this rule are only necessary for the 'flip' transition.
 * We need specify the perspective to create a projection matrix. This will add
 * some depth as the element flips. The depth number represents the distance of
 * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
 * value.
 */
.viewport-turn {
    -webkit-perspective: 200px;
    perspective: 200px;
    position: absolute;
}
.turn {
    -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. */
    -webkit-transform-origin: 0;

    backface-visibility :hidden;
    transform: translateX(0);
    transform-origin: 0;
}
.turn.out {
    -webkit-transform: rotateY(-90deg) scale(.9);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 125ms;

    transform: rotateY(-90deg) scale(.9);
    animation-name: flipouttoleft;
    animation-duration: 125ms;
}
.turn.in {
    -webkit-animation-name: flipintoright;
    -webkit-animation-duration: 250ms;
    animation-name: flipintoright;
    animation-duration: 250ms;

}
.turn.out.reverse {
    -webkit-transform: rotateY(90deg) scale(.9);
    -webkit-animation-name: flipouttoright;
    transform: rotateY(90deg) scale(.9);
    animation-name: flipouttoright;
}
.turn.in.reverse {
    -webkit-animation-name: flipintoleft;
    animation-name: flipintoleft;
}
@-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 flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg) scale(.9); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg) scale(.9); }
    to { transform: rotateY(0); }
}
@-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); }
}
/* flow transition */
.flow {
    -webkit-transform-origin: 50% 30%;
    transform-origin: 50% 30%;
}
.flow.out {
    -webkit-transform: translateX(-100%) scale(.7);
    -webkit-animation-name: flowouttoleft;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 350ms;
    transform: translateX(-100%) scale(.7);
    animation-name: flowouttoleft;
    animation-timing-function: ease;
    animation-duration: 350ms;
}
.flow.in {
    -webkit-transform: translateX(0) scale(1);
    -webkit-animation-name: flowinfromright;
    -webkit-animation-timing-function: ease;
    -webkit-animation-duration: 350ms;
    transform: translateX(0) scale(1);
    animation-name: flowinfromright;
    animation-timing-function: ease;
    animation-duration: 350ms;
}
.flow.out.reverse {
    -webkit-transform: translateX(100%);
    -webkit-animation-name: flowouttoright;
    transform: translateX(100%);
    animation-name: flowouttoright;
}
.flow.in.reverse {
    -webkit-animation-name: flowinfromleft;
    animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
    0% { -webkit-transform: translateX(0) scale(1); }
    60%, 70% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform: translateX(-100%) scale(.7); }
}
@keyframes flowouttoleft {
    0% { transform: translateX(0) scale(1); }
    60%, 70% { transform: translateX(0) scale(.7); }
    100% { transform:  translateX(-100%) scale(.7); }
}
@-webkit-keyframes flowouttoright {
    0% { -webkit-transform: translateX(0) scale(1); }
    60%, 70% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform:  translateX(100%) scale(.7); }
}
@keyframes flowouttoright {
    0% { transform: translateX(0) scale(1); }
    60%, 70% { transform: translateX(0) scale(.7); }
    100% { transform:  translateX(100%) scale(.7); }
}
@-webkit-keyframes flowinfromleft {
    0% { -webkit-transform: translateX(-100%) scale(.7); }
    30%, 40% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform: translateX(0) scale(1); }
}
@keyframes flowinfromleft {
    0% { transform: translateX(-100%) scale(.7); }
    30%, 40% { transform: translateX(0) scale(.7); }
    100% { transform: translateX(0) scale(1); }
}
@-webkit-keyframes flowinfromright {
    0% { -webkit-transform: translateX(100%) scale(.7); }
    30%, 40% { -webkit-transform: translateX(0) scale(.7); }
    100% { -webkit-transform: translateX(0) scale(1); }
}
@keyframes flowinfromright {
    0% { transform: translateX(100%) scale(.7); }
    30%, 40% { transform: translateX(0) scale(.7); }
    100% { transform: translateX(0) scale(1); }
}
时间： 2024-10-30 21:20:52

深入理解transform属性之翻转效果的相关文章

css3实现色子自动翻转效果

原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body> <div id="outer"> <div id="group"> <div class="page" id="page1">.</div>

CSS3 transform实现3D立方体效果

CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立方体的效果实例来深入了解css3的transform属性,下面是这个实例的截图,加上动画还能旋转起来哟,是不是很酷炫?换上你喜欢的女生的照片,就可以大胆的撩妹了 初识transform 顾名思义:变换.就可以想到它可以做很多很多的事情了,这个属性有很多的值,在这里简单列举一下: translate(

css3的图形3d翻转效果应用示例

css3的图形3d翻转效果应用示例  代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>css3 3d rotate</title> <style type="text/css&quo

JS实现六边形3D拖拽翻转效果的方法_javascript技巧

效果图 实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

Transform 属性会导致子元素的 fixed 属性失效

在项目中,需要为顶部导航条增加滚动跟随效果.很显然,只需要为 #header 加上 position:fixed; 属性即可,但是加上之后却无效.只能用监测浏览器滚动距离然后实时的赋值到 top 属性来模拟跟随. 但是这种方法由于浏览器之间滚动的距离不同等缘故,会导致闪烁等问题,只在 Firefox 效果完美.同时会影响性能,在中低端安卓设备中效果很差.这种影响用户体验的事情,是肯定要避免的.还是得回来使用 fixed,但是从未发现过 fixed 失效的情况啊,只能挨个测试一下. 问题发现 先写

最简单的CSS图片翻转效果

今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际上用CSS可以非常方便地制作出来的. 这里给出一个最简单的效果,在深入的复杂效果变化就非常多了,有兴趣的读者可以慢慢深入研究. 先看一下这个效果,将鼠标移到按钮图片上时,图片就会成另一个了. Button Text   这个效果实现其实非常简单,第一步:准备两个图片,大小完全相同即可,这里是128X34像素.   左边这个是通常状态时的图片,叫

Flash CS3制作卡片翻转效果

在Flash讨论中一个流行的卡通效果:怎样让一个平面卡片按360度角旋转或翻转.要明白这个动画的方法是困难的.这不难想象, Flash从来就是两维的程序,而要添加一个三维的实例是不可能的,除非那个对象是在时间轴上重新手工绘制的.但是使用Flash,在所有的方法中,它不能真正的实现三维.下面来看看如何制作卡片翻转效果的. 示意图 1.首先画一个没有笔触的矩形,在第10帧插入关键帧.选择自由变形工具(q)然后选择扭曲子工具. 图1 2.按住Shift键,将顶部的角拉离形状.继续按住Shift键将底部

PowerPoint设计 制作3D翻转效果教程

  PowerPoint演示文稿,之所以叫演示,就是因为要做给人看的,至于看完的效果如何,就要看制作者的用心设计呢,一个好演示文稿,除了图片与文字的相得益彰,动画过渡的完美组合,音乐与歌词的同步进行,内容与动画的相互呼应!PowerPoint的生动就在于动画演绎的完美,下面教大家一个3D翻转效果,希望大家在制作的过程能起到作用! 1.打开PowerPoint软件,找到插入. 2.按住ctrl插入多张图片. 3.插入之后按ctrl+a选中所有图片.( 注:一般情况下,刚插入之后都是全选状态) 4.

图片翻转效果具体实现代码

 想必大家对图片翻转效果都有所了解吧,其实很容易实现的,下面有个不错的示例,喜欢的朋友可以参考下 以下为程序代码:  代码如下: <!DOCTYPE html />  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  <meta http-equiv="X-UA-Compatib