zoukankan      html  css  js  c++  java
  • CSS3——制作图片翻页的小动画

    觉得还挺有意思的嘻嘻~

    这里有一个问题要注意一下,图片反转过程中可能会遇到一种如下所示的跳变bug:

    这玩意一出来吓我一大跳,显然这种用户体验是很不好的,解决方法:

    在.pic, .info{...}这个样式中添加 transform:perspective(800px) rotateY(0deg) 这句话就好啦!要给他一个初始的位置,这样他就不会乱飞啦~

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图片翻面</title>
        <style type="text/css">
            .con{
                width:249px;
                height:299px;
                margin:100px auto 0;
                position:relative;
                transform-style: preserve-3d;
            }
    
            .pic, .info{
                width:249px;
                height:299px;
                position:absolute;
                left:0;
                top:0;
                /*隐藏背面图片*/
                backface-visibility: hidden;
                transition: all 1s ease;
                /*防止跳变bug*/
                transform:perspective(800px) rotateY(0deg) ;
            }
    
            .info{
                width:249px;
                height:299px;
                background-color: rgb(80,143,22);
                text-align: center;
                line-height: 299px;
                transform: translateZ(2px) rotateY(180deg);
            }
    
            .con:hover .pic{
                transform: perspective(800px) rotateY(180deg);
            }
    
            .con:hover .info{
                transform: perspective(800px) rotateY(0deg);
            }
        </style>
    </head>
    
    <body>
        <div class="con">
            <div class="pic"><img src="images/login.jpg" alt="小鸭子"></div>
            <div class="info">图片文字说明</div>
        </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    关于欧拉函数
    JavaWeb技术
    jQuery介绍
    Spring之事务管理
    Hibernate课堂笔记
    JSON简介
    Ajax简介
    Java代码生成图片验证码
    JAVA学习笔记——ClassLoader中getResource方法的路径参数
    JAVA OOP学习笔记——多态(polymorphism)
  • 原文地址:https://www.cnblogs.com/gaoquanquan/p/9168955.html
Copyright © 2011-2022 走看看