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: px;
    line-height: ;
}

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

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

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

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

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

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

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

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

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

}　　   
    </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: px;
    line-height: ;
}

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

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

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

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

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

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

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

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

巴特西

css3 实现明信片正背面翻转

最新文章

热门文章