css3 实现明信片正背面翻转

<!DOCTYPE html>
<html lang="zh-cn" style="width: 100%;height: 100%;">
<head>
    <meta charset="UTF-8">
    <title>预览明信片</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="Houyuqing">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
　　 <style>


.pre-top {
    text-align: center;
    padding-bottom: 96px;
    line-height: 1;
}

.pre-top span {
    font-size: 14px;
    color: #fff;
    padding: 5px;
}

.pre-top span:nth-of-type(1) {
    position: relative;
}

.pre-top span:nth-of-type(1):after {
    position: absolute;
    content: '';
    z-index: 1;
    width: 2px;
    height: 12px;
    top: 9px;
    right: -7px;
    background: #fff;
}

.preview {
    height: 35%;
    width: 100%;
    box-sizing: border-box;
    perspective: 1200px;
}

.preview figure {
    margin: 0;
    height: 100%;
    transform-style: preserve-3d;
    transition: 1s transform;
}

.figure1 {
    transform: rotateY(.5turn);
}

.preview figure img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 7px solid #fff;
    box-shadow: 5px 5px 10px #a6a3a4;
}

.preview figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url("../images/img-back.png");
    background-size: cover;
    transform: rotateY(.5turn) translateZ(1px);
}
.preview figcaption h1 {
    position: absolute;
}

.fig-word {
    font-size: 14px;
    color: #000;
    padding: 63px 19px;

}　　   
    </style>
</head>
<body class="word-back">
    <div class="pre-top">
        <span class="commRed span1">正面</span>
        <span class="span2">背面</span>
    </div>
    <div class="preview">
        <figure class="relative">
            <img src="../images/11.jpg" alt="" class="">
            <figcaption>
                <p class="fig-word css11339c70851c62b">这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦这是好友给你的悄悄哦</p>
            </figcaption>
        </figure>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script>
//        正面
        $('.span1').click(function () {
            $('figure').removeClass('figure1');//背面消失
            $(this).addClass('commRed').siblings().removeClass('commRed');//加红色
        });
//        背面
        $('.span2').click(function () {
            $('figure').addClass('figure1');//背面出现
            $(this).addClass('commRed').siblings().removeClass('commRed');//加红色
        });
//        点击页面转换正背面
        $('.preview').click(function () {
            if($('.span1').is('.commRed')){
                $('figure').addClass('figure1');//背面出现
                $('.span1').removeClass('commRed').siblings().addClass('commRed');//加红色
            }else {
                $('figure').removeClass('figure1');//背面消失
                $('.span2').removeClass('commRed').siblings().addClass('commRed');//加红色
            }
        })
    </script>

</body>
</html>


.pre-top {
    text-align: center;
    padding-bottom: 96px;
    line-height: 1;
}

.pre-top span {
    font-size: 14px;
    color: #fff;
    padding: 5px;
}

.pre-top span:nth-of-type(1) {
    position: relative;
}

.pre-top span:nth-of-type(1):after {
    position: absolute;
    content: '';
    z-index: 1;
    width: 2px;
    height: 12px;
    top: 9px;
    right: -7px;
    background: #fff;
}

.preview {
    height: 35%;
    width: 100%;
    box-sizing: border-box;
    perspective: 1200px;
}

.preview figure {
    margin: 0;
    height: 100%;
    transform-style: preserve-3d;
    transition: 1s transform;
}

.figure1 {
    transform: rotateY(.5turn);
}

.preview figure img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 7px solid #fff;
    box-shadow: 5px 5px 10px #a6a3a4;
}

.preview figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url("../images/img-back.png");
    background-size: cover;
    transform: rotateY(.5turn) translateZ(1px);
}
.preview figcaption h1 {
    position: absolute;
}

css3 实现明信片正背面翻转

推荐阅读