<!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. 从getwebshell到绕过安全狗云锁提权再到利用matasploit进服务器

    本文作者:i春秋签约作家——酷帥王子 一. 利用getwebshell篇 首先对目标站进行扫描,发现是asp的,直接扫出网站后台和默认数据库,下载解密登陆如图: 下面进后台发现有fckeditor,而 ...

  2. mysql编写存储过程（2）

    书接上回. 实例8:if-then -else语句 实例9:case语句: 实例10:循环语句,while ···· end while: 实例11:循环语句,repeat···· end repea ...

  3. day 48 ORM 进阶 多表连接 创建 以及 html模板继承

    多表的一对多创建 多表的多对多创建 多表的一对多修改 多表的多对多修改 前情提要:   最近认识了不少大佬,大佬开着保时捷. .一顿狂奔..我连车尾灯都看不到.. 本次内容  ORM 的多表链接  查 ...

  4. 实现可搜索仿select下拉选中

    由于在优化项目中,发现先前写的一个活化石级的的可搜索下拉功能在高速搜索中会出现卡顿现象 1.起初的解决方法是在搜索事件中加入防抖函数隔一段时间才去触发他,同时搜索的不再是html文档片段,而是直接对数 ...

  5. NOIP2017滚粗记【下】

    (续上篇) Day1: 下午,全竞赛队的人都在竞赛室颓~,再次吐槽下我校网管科的,下午普及考试又把竞赛室的网络切掉了,还好我们机制地准别了一堆单机游戏.普及组考完后,网络又恢复正常了,但晚上9点左右又 ...

  6. WebDriverAPI（7）

      查看页面元素的属性 测试网址 http://www.baidu.com Java语言版本API实例 @Test public void getWebElementAttribute() { dri ...

  7. 安装Hive-0.10.0-CDH4.5.0所遇异常

    Note: 虚拟机访问Win7中mysql(root用户+密码) hive出现异常1: FAILED: Error in metadata: java.lang.RuntimeException: U ...

  8. （转）MySQL优化笔记（八）--锁机制超详细解析（锁分类、事务并发、引擎并发控制）

    当一个系统访问量上来的时候,不只是数据库性能瓶颈问题了,数据库数据安全也会浮现,这时候合理使用数据库锁机制就显得异常重要了. 原文:http://www.jianshu.com/p/163c96983 ...

  9. Spring Security构建Rest服务-0100-前言

    一.我的前言 这是看慕课网老师讲的SpringSecurity的学习笔记,老师讲的很好,开篇就说到了我的心里,老师说道: 有一定经验的程序员如何提升自己? 1,每天都很忙,但是感觉水平没有提升 2,不 ...

  10. scalac:cannot connnect to compile server(idea 编译scala)

    idea编译scala报错 解决办法: File->setting->scala compile server  (找到jdk填上 ok)