前端开发纯C3实现3D翻牌效果

前端开发用nodejs干什么|web开发前端开发需要学什么|福州前端开发工资待遇

用css3里的backface-visibility、transform-style以及transform属性实现(IE下,IE10+版本才能支持)

html 代码片段

<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
    <meta charset=”UTF-8″>
    <title></title>
</head>
<style type=”text/css”>
    body {
        background: #eeeeee;
    }
    h3 {
        color: red;
        text-align: center;
        font: bold 18px/1.5 “microsoft yahei”;
    }
    .card-container {
        position: relative;
        width: 1100px;
        margin: 0 auto;
    }
    .card {
        margin-right: 15px;
        width: 200px;
        height: 380px;
        float: left;
    }
    .card .font,
    .card .back {
        position: absolute;
        transition: transform 0.4s;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
    }
    .card .font {
        -webkit-transform: rotateY( 0deg);
        -moz-transform: rotateY( 0deg);
        -o-transform: rotateY( 0deg);
        transform: rotateY( 0deg);
    }
    .card .back {
        -webkit-transform: rotateY( -180deg);
        -moz-transform: rotateY( -180deg);
        -o-transform: rotateY( -180deg);
        transform: rotateY( -180deg);
    }
    .card:hover .font {
        -webkit-transform: rotateY( 180deg);
        -moz-transform: rotateY( 180deg);
        -o-transform: rotateY( 180deg);
        transform: rotateY( 180deg);
    }
    .card:hover .back {
        -webkit-transform: rotateY( 0deg);
        -moz-transform: rotateY( 0deg);
        -o-transform: rotateY( 0deg);
        transform: rotateY( 0deg);
    }
    .card2,
    .card4 {
        margin-top: 20px;
    }
</style>
<body>
    <h3>鼠标移动到卡片上试试</h3>
    <div class=”card-container”>
        <div class=”card card1″>
            <a href=”#” class=”back”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card6-back.png” />
            </a>
            <a href=”#” class=”font”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card6.png” />
            </a>
        </div>
        <div class=”card card2″>
            <a href=”#” class=”back”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card7-back.png” />
            </a>
            <a href=”#” class=”font”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card7.png” />
            </a>
        </div>
        <div class=”card card3″>
            <a href=”#” class=”back”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card8-back.png” />
            </a>
            <a href=”#” class=”font”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card8.png” />
            </a>
        </div>
        <div class=”card card4″>
            <a href=”#” class=”back”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card9-back.png” />
            </a>
            <a href=”#” class=”font”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card9.png” />
            </a>
        </div>
        <div class=”card card5″>
            <a href=”#” class=”back”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card10-back.png” />
            </a>
            <a href=”#” class=”font”>
                <img src=”http://9yin.woniu.com/static/web201588/images/card10.png” />
            </a>
        </div>
    </div>
</body>
</html>

python web前端开发工程师|h5开发和前端开发区别|h5前端开发面试

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

评论 抢沙发

评论前必须登录!