css3 实现明信片正背面翻转-优快云博客

本文介绍了一个使用HTML和CSS实现的明信片翻转效果案例，通过简单的JavaScript交互，实现了明信片正反面的切换展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;
}