<!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 实现明信片正背面翻转的更多相关文章

  1. 一款纯css3实现的图片3D翻转幻灯片

    之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览   源码下载 实现的代码. ht ...

  2. 如何用CSS3来实现卡片的翻转特效

    CSS3实现翻转(Flip)效果 动画效果 效果分析 当鼠标滑过包含块时,元素整体翻转180度,以实现“正”“反”面的切换. HTML分析 分析:.container,.flip为了实现动画效果做准备 ...

  3. 一款基于css3的散子3D翻转特效

    css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body& ...

  4. 纯css3 transforms 3D文字翻开翻转3D开放式效果

    详细内容请点击 在线预览立即下载 在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果.教程的目的是展示我们如何能带来一些生活上使用CSS3 . html: <ul class=&q ...

  5. css3 向上淡入 小图标翻转 360度旋转

    代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px soli ...

  6. CSS3之图片3D翻转效果(网页效果--每日一更)

    今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...

  7. 一个纯CSS实现的卡片翻转效果

    先上代码 <div id="box"> <div class="front">正面</div> <div class= ...

  8. BZOJ3526[Poi2014]Card——线段树合并

    题目描述 有n张卡片在桌上一字排开,每张卡片上有两个数,第i张卡片上,正面的数为a[i],反面的数为b[i].现在,有m个熊孩子来破坏你的卡片了!第i个熊孩子会交换c[i]和d[i]两个位置上的卡片. ...

  9. 霍金：AI或许能根除疾病和贫穷，但也可能摧毁人类 | GMIC 2017

    在我的一生中,我见证了社会深刻的变化.其中最深刻的,同时也是对人类影响与日俱增的变化,是人工智能的崛起.简单来说,我认为强大的人工智能的崛起,要么是人类历史上最好的事,要么是最糟的.我不得不说,是好是 ...

随机推荐

  1. pg总览

    一.编译安装初始化等 ./configure --prefix=/release --with-openssl --without-ldap --with-libxml - -enable-threa ...

  2. Miler-Rabbin素数判定

    前言 素数判定? 小学生都可以打的出来! 直接暴力O(n)O(\sqrt n)O(n​)-- 然后就会发现,慢死了-- 于是我们想到了筛法,比如前几天说到的詹欧筛法. 但是线性的时间和空间成了硬伤-- ...

  3. 今天介绍一个渐变的方法，在shell里面自动生成注释简介

    在编辑sh脚本时,我经常在shell中写一些注释.今天我介绍一种渐变方法,它可以在每次vim shell脚本时自动在shell中生成注释和其他信息. 让我们共享一个shell脚本模板文件,将其复制到用 ...

  4. table方法也属于模型类的连贯操作方法之一

    table方法也属于模型类的连贯操作方法之一,主要用于指定操作的数据表. 用法 一般情况下,操作模型的时候系统能够自动识别当前对应的数据表,所以,使用table方法的情况通常是为了: 切换操作的数据表 ...

  5. lvs + keepalived + nginx + tomcat高可用负载反向代理服务器配置（二） LVS+Keepalived

    一.安装ipvs sudo apt-get install ipvsadm 二.安装keepalived sudo apt-get install keepalived 三.创建keepalived. ...

  6. EF(Entity Framwork)结构

    初次接触EF,看了一些资料,将自己对EF结构的理解记录如下: EF的核心是EDM----实体数据模型(.edmx).它由三部分组成:概念模型(.csdl文件).存储模型(.ssdl文件).映射规范(. ...

  7. 转：五种I/O模型和select函数简介

    源地址:http://blog.csdn.net/jnu_simba/article/details/9070955 一.五种I/O模型 1.阻塞I/O 我们在前面所说的I/O模型都是阻塞I/O,即调 ...

  8. java扫描某个包下的所有java类并加载

    最近在学习java的反射和注解,实际情景中需要扫描某个包下的所有java类,然后使用类加载器加载类. 基本思路,获得程序的路径扫描src下某个包内的子包和java类,实现也比较简单. 运行环境:win ...

  9. mybatis和java一些知识记录

    <where> <if test="userName != null and userName != ''"> and user_name like con ...

  10. Dmarc指定外域邮箱接收报告

    场景说明: 如果要将DMARC报告发送到记录所在的域以外,则接收域需要配置DNS记录,以便电子邮件服务提供商知道收件人指定报告授权. ================================= ...