<!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. JVM中的对象生命周期

    在JVM运行空间中,对象的整个生命周期大致可以分为七个阶段:创建阶段(Creation).应用阶段(Using).不可视阶段(Invisible).不可到达阶段( Unreachable).可收集阶段 ...

  2. nginx-限制后端服务器连接数

    http加 limit_conn_zone $binary_remote_addr zone=perip:10m;limit_conn_zone $server_name zone=perserver ...

  3. cas单点登陆系统-casServer搭建

    最近工作比较忙,空闲的时间在搞单点登陆系统,自己写了一套SSO在GitHub上,过程走通了.通过这个例子,自己熟悉了流程,而且破天荒的使用了抽象设计模式,并且熟悉了cookies和session的使用 ...

  4. Android中获取正在运行的服务-------ActivityManager.RunningServiceInfo的使用

    关于PackageManager和ActivityManager的使用 ,自己也写了一些DEMO 了,基本上写的线路参考了Settings模块下的 应用程序,大家如果真正的有所兴趣,建议大家看看源码, ...

  5. absolute

    在需要用到小图标时,可以使用position:absolute,它具有消除float和位置不变特性.使用absolute可以浮现在同级元素的上方.用margin进行精确定位即可,也不必使用top,le ...

  6. 无头结点的单链表（C语言）

    1.单链表: 在顺序表中,用一组地址连续的存储单元来一次存放线性表的结点,因此结点的逻辑顺序与物理顺序是一致的.但链表却不同,链表是用一组任意的存储单元来存放 线性表的结点,这组存储单元可以是连续的, ...

  7. R程序包

    === 数据基础操作 ===reshape2 横向.纵向做数据变换,例如把纵向堆叠在数据库中的证券行情数据转换成一个按照不同证券代码横向排列,按照时间纵向排列收盘价的数据表stringr 方便地用正则 ...

  8. 剑指offer二十八之数组中出现次数超过一半的数字

    一.题目 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  9. Java执行Shell脚本“No such file or directory” (win->Linux)异常的可能原因

    转自:http://blog.csdn.net/zlpdaisy/article/details/6134314 用Runtime.getRuntime().exec()方法执行Linux的一个She ...

  10. (转)LINUX CENTOS7下安装PYTHON

    LINUX CENTOS7下安装PYTHON 原文:http://www.cnblogs.com/lclq/p/5620196.html Posted on 2016-06-27 14:58 南宫羽香 ...