前端开发 图片3D翻转效果

app开发要前端和后端|web前端开发与美工有什么区别|前端开发要用什么书籍?

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .front,
        .back {
            /*backface-visibility: hidden;*/
            position: absolute;
            top: 0;
            left: 0;
            width: 146px;
            height: 200px;
        }
        .flipper {
            transition: 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }
        /*.flip-container {
perspective: 1000;
}*/
        .flip-container:hover .flipper {
            transform: rotateY(180deg);
        }
        /*不加
.back {
transform: rotateY(180deg);
}属于自己翻转,加上以后属于两张图片翻转*/
        .back {
            transform: rotateY(180deg);
        }
        .flip-container,
        .front,
        .back {
            width: 146px;
            height: 200px;
        }
        img {
            width: 146px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class=”flip-container”>
        <div class=”flipper”>
            <div class=”front”>
                <!– 前面内容 –>
                <img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534589363&di=1e888dac06efbd6af9f759ecfa643f3a&imgtype=jpg&er=1&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F2fdda3cc7cd98d10261a710a2a3fb80e7bec903a.jpg”>
            </div>
            <div class=”back”>
                <!– 背面内容 –>
                <img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533994698143&di=4b22e043e18e1b155775dbcd0489e509&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01796d5655681b6ac7251c942f64eb.jpg”>
            </div>
        </div>
    </div>
</body>
</html>

app前端开发主要做什么|公众号前端用什么开发|公众号前端用什么开发

» 本文来自:前端开发者 » 《前端开发 图片3D翻转效果》
» 本文链接地址:https://www.rokub.com/5189.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!