<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

.flip-container {

    perspective: 1000;

}

    /* flip the pane when hovered */

    /*.flip-container:hover .flipper, .flip-container.hover .flipper {

        transform: rotateY(180deg);

    }*/

     .flip-container.hover .flipper {

        transform: rotateY(180deg);

    }

.flip-container, .front, .back {

    width: 320px;

    height: 480px;

}

/* flip speed goes here */

.flipper {

    transition: 0.6s;

    transform-style: preserve-3d;

    position: relative;

}

/* hide back of pane during swap */

.front, .back {

    backface-visibility: hidden;

    position: absolute;

    top: 0;

    left: 0;

}

/* front pane, placed above back */

.front {

    z-index: 2;

    background: red;

}

/* back, initially hidden pane */

.back {

    transform: rotateY(180deg);

    background: cyan;

}

#myCard {

    padding-top:300px;

    }

    </style>

</head>

<body>

    <!-- <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> -->

    <div class="flip-container">

    <div class="flipper">

        <div class="front">

            前面内容

        </div>

        <div class="back">

            背面内容

        </div>

    </div>

</div>

    <!-- /<div id="myCard" onclick="document.querySelector('.flip-container').classList.toggle('hover')">but</div> -->

    <div id="myCard">but</div>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>

        $(function(){

            $('#myCard').click(function(){

                $('.flip-container').toggleClass('hover')

            })

        })

    </script>

</body>

</html>

原文：http://www.jianshu.com/p/99aeb911f547；

https://segmentfault.com/a/1190000003903190

css3 3d正反面翻转的更多相关文章

  1. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  2. CSS3—3D翻转

    本案例主要是css3和html5,不会js也可以做动画◕.◕ 一.首先看下主要需要的样式: perspective transform transition position classList 就这 ...

  3. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  4. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  5. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

  6. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  7. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  8. jquery 3D分页翻转滑块

    jquery 3D分页翻转滑块,jquery分页,jquery插件,jquery,3D翻转,css3分页,360度旋转,网页特效代码3D分页翻转滑块是一款使用网格样式与滑块效果分页的特效.

  9. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

随机推荐

  1. 怎么在eclipse中访问webservice

    在eclipse创建webservice的方法: 1.在Eclipse的菜单栏中,Window --> Preferences --> Web Service --> Axis2 P ...

  2. 【LeetCode】414. 第三大的数

    给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示例 2 ...

  3. PHP相关异常

    1. Maximum execution time of 30 seconds exceeded 报错一:内存超限,具体报错语句忘了,简单说一下解决办法 1> 利用循环分批导入: 2> 每 ...

  4. Spring Security构建Rest服务-0400-使用切片拦截rest服务

    Restful API的拦截: 1,过滤器(Filter) 2,拦截器(Interceptor) 3,切片(Aspect) 1,过滤器 和传统javaweb一鸟样,例,记录controller执行时间 ...

  5. java数据结构之三叉链表示的二叉树

    三叉链表示的二叉树定义所畏的三叉链表示是指二叉树由指向左孩子结点.右孩子结点.父亲结点[三叉]的引用(指针)数据和数据组成.    package datastructure.tree.btree; ...

  6. MongoDB运行状态、性能监控，分析

    转载自这位仁兄:地址 mongostat详解 mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态,并输出.如果你发现数据库突然变慢或者 ...

  7. CountDownTimer倒计时器的使用

    以前好多倒计时的需求都需要自己去写,今天发现android 原来自带了倒计时的类CountDownTimer,和适合用于发送短信 ,等待验证码的情况 代码展示了在一个TextView进行60S的倒计时 ...

  8. 软件魔方制作系统启动盘并安装win10系统

    不多说,直接上干货!  推荐软件:软件魔方 http://mofang.ruanmei.com/ 这里,我想说的是,这个软件来制作系统盘,是真的方便和好处多多.具体我不多说,本人也是用过其他的如大白菜 ...

  9. rails 5.2 启动警告 warning: previous definition of VERSION was here和bootsnap

    bootsnap依赖问题 You should add gem 'bootsnap' to your gemfile to install it or remove the line require ...

  10. Windows 8.1 硬盘安装 Ubuntu14.04 双系统参考教程及注意事项

    硬盘安装,无需光盘.U盘:Win8.1为主,Ubuntu14.04为辅,可将Windows或Ubuntu设置为开机默认启动项:在Ubuntu下可查看.操作Windows系统下的文件:适用于安装和14. ...