找回密码
当前位置：前端开发者 > CSS > 正文

CSS3 前端开发图片翻转切换案例

2018-07-06 分类：CSS 阅读(708) 评论(0)

贸易公司招聘前端开发|前端开发技术和工具箱|前端技术开发 英语怎么说？

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发经理招聘要求：css3翻转效果</title>
</head>
<style>
    .flip-container {
        margin: 30px;
        display: inline-block;
        border: 1px solid #aaa;
        -webkit-perspective: 500;
        -moz-perspective: 500;
        -ms-perspective: 500;
        perspective: 500;
        -ms-transform: perspective(500px);
        -moz-transform: perspective(500px);
        transform-style: preserve-3d;
    }
    .flipper {
        position: relative;
        width: 200px;
        height: 200px;
        transition: 0.6s;
        transform-style: preserve-3d;
    }
    /* 触发翻转 */
    .flip-container:hover .flipper {
        transform: rotateY(-180deg);
    }
    .front,
    .back {
        position: absolute;
        left: 0;
        top: 0;
        backface-visibility: hidden;
        width: 100%;
        height: 100%;
    }
    .front {
        transform: rotateY(0deg);
        z-index: 2;
        background: #FFFF00;
    }
    .back {
        transform: rotateY(180deg);
        background: #FFC0CB;
    }
</style>
<body>
    <div class=”flip-container”>
        <div class=”flipper”>
            <div class=”front”>这是正面</div>
            <div class=”back”>这是反面</div>
        </div>
    </div>
</body>
</html>

web前端开发移动端适应|移动端前端开发文档|前端开发 fiddler插件

赞(0)
前端开发者 » CSS3 前端开发图片翻转切换案例
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论